Navigation in web pages is often found in the form of navigation bars, or navbars, and Bootstrap adds some specific features for navbars. These work as headers for your website or web application. Bootstrap navbars:
When you are building navbars in Bootstrap, it’s important to remember that Bootstrap is a mobile first framework. So everything you build is first designed for a mobile device, and then features for larger devices are added. Resize the window (on a desktop) to see the effect in a narrow and full-sized window.
This shows a basic navbar brand using text. (An image can also be used.)
Bootstrap uses a navbar that us usually collapsed and hidden in mobile browsers, but makes it easy to add a toggle button that appears as a three-line "hamburger" icon. The following shows the button code that is added. (The effect can be seen on the previous navbar example, when viewed on a mobile device or narrowed browser window.)
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsedNav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>