Bootstrap Navbar

Bootstrap Navbar is the one of most prominent feature of Bootstrap; this is a nice feature of websites. These navbars are resosnsive that provide navigation headers for your website or application. When you open your website in mobile these navbars collapse and become horizontal as the available website width increases.

Default navbar

How to make a default navbar use following steps.

  • Add these classes .navbar, .navbar-default on the <nav> element.

  • Also add the role=”navigation” to the above tag just for help with accessibility.

  • Make a <div> and add a header class .navbar-header. Also put an <a> tag with class .navbar-brand. You will get the text a little larger size.

  • Now add the links to the navbar, simply use <ul> tag with a classes of.nav, .navbar-nav.

Following example demonstrates this:

Responsive navbar

To make responsive to the navbar; the content which you want to make responsive that needs to be wrapped in a <div> with these classes .collapse, .navbar-collapse. The collapsing behavior is worked with the button that has the class of .navbar-toggle and then features two data-elements.

  • The first element, data-toggle, is used to indicate the JavaScript that what action should work with the button.
  • The second element, data-target, point out which part of menu to toggle.
  • Create using the class of .icon-bar what I like to call the hamburger button.

After doing this you can toggle the elements which are in the .nav-collapse <div>. You need to call Collapse plugin of bootstrap for this feature to work.

Following example show this:

Forms in navbar

For implement the forms elements in navbar use .navbar-form class for proper vertical alignment and collapsed behavior in narrow viewports instead of using the default classes of forms as we have discussed in Bootstrap Forms Tutorial. This code of example demonstrates this:

Buttons in navbar

Buttons can be add by using class .navbar-btn to <button> elements not residing in a <form> to vertically center them in the navbar. Class .navbar-btn can be apply on <a> and <input> tags do don’t use .navbar-btn nor the standard button classes on <a> elements within .navbar-nav. See following example for this:

Text in navbar

Apply this class .navbar-text on the container element of the text. Mostly the container for text is used with <p> tag for proper leading and color. This code of example you can try to see the result.

Non-nav links

For those who are using standard links that are not within the regular navbar navigation component, after that use this class .navbar-link to add the proper colors for the default and inverse navbar options as shown in the following example:

Component alignment

Components like nav links, forms, buttons, or text you can align to left or right in a navbar using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. The below mentioned example demonstrates this:

Fixed to top

If you want to fix position of navbar on the top, Bootstrap provides also this feature in navbar component. Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content. The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Following example show this:

Fixed to bottom

If you want to fix position of navbar at the bottom of the page, Bootstrap provides also this feature in navbar component. Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content. The fixed navbar will overlay your other content. Following example show this:

Static top

If you want to create a full-width navbar that scrolls away with the page, by adding .navbar-static-top and includes a .container or .container-fluid to center and pad navbar content. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

Inverted navbar

If you want to create navbar with inverted colors like white text and black background, simply add inverse word in css class like this .navbar-inverse.

Leave a Reply

Your email address will not be published. Required fields are marked *