1<navclass="navbar navbar-default navbar-fixed-top">2<divclass="container-fluid">3<divclass="navbar-header">4<buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar">5<spanclass="sr-only">Toggle navigation...
1<navclass="navbar navbar-default navbar-fixed-top">2<divclass="container-fluid">3<divclass="navbar-header">4<buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar">5<spanclass="sr-only">Toggle navigation...
Top navbar Navbar example This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page. View navbar docs »
Navbar examples This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a.container. For positioning of navbars, checkout thetopandfixed topexamples. ...
</nav> ... Try it Yourself » Note:All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens - because Bootstrap is responsive). This problem (with the small ...
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
Floating labelsBuild form controls with floating labels via the :placeholder-shown pseudo-element. Works in latest Chrome, Safari, and Firefox.Email address Password Remember me Sign in © 2017-2018
This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.To see the difference between static and fixed top navbars, just scroll....
This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.To see the difference between static and fixed top navbars, just scroll....
If you open the example, you will also see that we added the CSS top property with a value of 0 to the .affix class. This is to make sure that the navbar stays at the top of the page at all time, when we have scrolled 197 pixels from the top....