Bootstrap - Navigation Elements: Navbars

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:

  • Start out collapsed in mobile views and can be toggled on and off
  • Include a place for your brand text or image
  • Can include buttons, button groups, dropdowns, and non-navigation links
  • Allow for forms including search boxes
  • Can be aligned to the right or left and fixed to the top or the bottom of the screen as well as positioned statically on the page
  • Have an inverted option for different colors

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.

Listing 12.6 - A Navbar


Navbar Headers and Brands

Listing 12.7 - A Navbar Brand

This shows a basic navbar brand using text. (An image can also be used.)


Listing 12.8 - Building a Navigation Toggle Button

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>

                  

(End of examples of Navigation element styles, Navbars Part 1.)