We now have a youtube channel. Subscribe!
Home
Bootstrap

Bootstrap | Navbar

Bootstrap | Navbar


Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial post, we will be discussing about Bootstrap navbar.

Navbar is one of the prominent features of Bootstrap website. Navbars are responsive 'meta' components that serve as navigation headers for your website. Navbars collapse in mobile views and becomes horizontal as the available viewport width increases. The navbar includes styling for site names and basic navigation.

Default Navbar

To create a default navbar -

  • Add the classes .navbar, .navbar-default to the <nav> tag.
  • Now add role = "navigation" to the above element, to assist with accessibility.
  • Add a header class .navbar-header to the <div> element. also include an <a> element with the class .navbar-brand. This will give the text a slightly larger size.
  • To add links to the navbar, simply add an unordered list with .nav, .navbar-nav classes.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Default Navbar


Responsive Navbar

To add a responsive features to the navbar, the content that you want to be collapsed have to be wrapped in a <div> with classes .collapse, .navbar-collapse. The collapsing nature is tripped by button having the class .navbar-toggle and then features two data elements. The first, data-toggle, instructs the JavaScript what to do with the button, and the second, data-target, shows which element to toggle. Then a class .icon-bar creates what we like to call the hamburger button. This will toggle the elements in the .nav-collapse <div>. In order for this feature to work, you need to include the Bootstrap Collapse Plugin.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Responsive Navbar

Forms in Navbar

Instead of making use of the default class-based forms as studied from our previous tutorial on Bootstrap Forms, forms that are in the navbar, make use of the .navbar-form class. This ensures that the form's proper vertical alignment and collapse behavior in narrow viewports use the alignment option to decide where it resides within the navbar content.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

Output

When the above example is executed, it will produce the following result -

Forms in Navbar

Buttons in Navbar

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

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Buttons in Navbar

Text in Navbar

To wrap strings of text in an element, make use of the .navbar-text class. This is often used with the <p> tag for a proper leading and color.

Example

Following example demonstrates this - 


<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Output

When the above example is execukhhted, it will produce the following result -

Text in Navbar


Non-nav Links

If you want to utilize the standard links that are not within the regular navbar navigation components, then make use of the .navbar-link class to add appropriate colors for the default and inverse navbar options.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Non-nav Links

Component Alignment

You can align components like nav links, forms, buttons, or text to the left or right in a navbar using the utility classes .navbar-left or .navbar-right. Both classes will add a CSS float in the specified direction.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Component Alignment

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 few helper classes, you can place it either at the top or bottom of the web page, or you can make it scroll statically with the web page.

If you want the navbar to be fixed to the top, add the .navbar-fixed-top class to the class of .navbar.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Output

When the above example is executed, it will produce the following result -

Fixed to Top


Fixed to Bottom

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

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Fixed to Bottom

Static Top

To create a navbar that scrolls with the web page, add the .navbar-static-top class. The class doesn't require adding the padding to the <body>.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Static Top

Inverted Navbar

In order to create an inverted navbar with a black background and a white text, add the .navbar-inverse class to the .navbar class.

Example

Following example demonstrates this - 

<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">WebDesignTutorialz</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Output

When the above example is executed, it will produce the following result -

Inverted Navbar


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Breadcrumb.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain