5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
6 <meta name=
"description" content=
"">
7 <meta name=
"author" content=
"">
8 <link rel=
"icon" href=
"../../favicon.ico">
10 <title>Sticky Footer Navbar Template for Bootstrap
</title>
12 <!-- Bootstrap core CSS -->
13 <link href=
"../../dist/css/bootstrap.min.css" rel=
"stylesheet">
15 <!-- Custom styles for this template -->
16 <link href=
"sticky-footer-navbar.css" rel=
"stylesheet">
22 <nav class=
"navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
23 <button class=
"navbar-toggler navbar-toggler-right" type=
"button" data-toggle=
"collapse" data-target=
"#navbarCollapse" aria-controls=
"navbarCollapse" aria-expanded=
"false" aria-label=
"Toggle navigation">
24 <span class=
"navbar-toggler-icon"></span>
26 <a class=
"navbar-brand" href=
"#">Fixed navbar
</a>
27 <div class=
"collapse navbar-collapse" id=
"navbarCollapse">
28 <ul class=
"navbar-nav mr-auto">
29 <li class=
"nav-item active">
30 <a class=
"nav-link" href=
"#">Home
<span class=
"sr-only">(current)
</span></a>
33 <a class=
"nav-link" href=
"#">Link
</a>
36 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
39 <form class=
"form-inline mt-2 mt-md-0">
40 <input class=
"form-control mr-sm-2" type=
"text" placeholder=
"Search">
41 <button class=
"btn btn-outline-success my-2 my-sm-0" type=
"submit">Search
</button>
46 <!-- Begin page content -->
47 <div class=
"container">
49 <h1>Sticky footer with fixed navbar
</h1>
51 <p class=
"lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with
<code>padding-top:
60px;
</code> on the
<code>body
> .container
</code>.
</p>
52 <p>Back to
<a href=
"../sticky-footer">the default sticky footer
</a> minus the navbar.
</p>
55 <footer class=
"footer">
56 <div class=
"container">
57 <span class=
"text-muted">Place sticky footer content here.
</span>
62 <!-- Bootstrap core JavaScript
63 ================================================== -->
64 <!-- Placed at the end of the document so the pages load faster -->
65 <script src=
"https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity=
"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin=
"anonymous"></script>
66 <script>window.jQuery || document.write('
<script src=
"../../assets/js/vendor/jquery.min.js"><\/script
>')
</script>
67 <script src=
"https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity=
"sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin=
"anonymous"></script>
68 <script src=
"../../dist/js/bootstrap.min.js"></script>
69 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
70 <script src=
"../../assets/js/ie10-viewport-bug-workaround.js"></script>