Online

Bootstrap - Navbar

Bootstrap provides an easy and quick way to create basic nav components like tabs and pills which are very flexible and elegant. All the Bootstrap's nav components-tabs and pills-share the same base markup and styles through the base .nav class.

The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive 'meta' components that serve as navigation headers for your application or site.

Responsive Navbar

To add responsive features to the navbar, the content that you want to be collapsed needs to be wrapped in a <div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by a button that has the class of .navbar-toggle and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Then with a class .icon-bar create what we like to call the hamburger button. This will toggle the elements that are in the .nav-collapse <div>.

Example :-

Result

Forms in Navbar

Instead of using the default class-based forms from Chapter Bootstrap Forms, forms that are in the navbar, use the .navbar-form class. This ensures that the form's proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options (explained in Component alignment section) to decide where it resides within the navbar content.

Example

Result

Buttons in Navbar

You can add buttons using class .navbar-btn to <button> elements not residing in a <form> to vertically center them in the navbar. .navbar-btn can be used on <a> and <input> elements.

Example

Result

Text in Navbar

To wrap strings of text in an element use the class .navbar-text. This is usually used with

tag for proper leading and color

Example

Result

Fixed to Top

The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. With a few helper classes, you can place it either on the top or bottom of the page, or you can make it scroll statically with the page.

Example

Fixed to Bottom

If you want the navbar fixed to the bottom of the page, add class .navbar-fixed-bottom to the .navbar class.

Example