Using Bootstrap’s Navigation Bar

Using Bootstrap’s Navigation Bar (or navigation header) allows you to provide a responsive way to navigate your web application with relative ease. It will automatically collapse depending on the size of the screen and number of items in navigation bar. here is an example below using AngularJS:

[code language=”javascript”]
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a href="restaurants" class="navbar-brand">Wing Specials</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="restaurants">Search</a></li>
<li ui-sref-active="active"><a ui-sref="about-us">About Us</a></li>
<li ui-sref-active="active"><a ui-sref="contact-us">Contact Us</a></li>

Here is what the above navigation bar may look like on a desktop or laptop:

Desktop view of Bootstrap navigation bar.

Desktop view of Bootstrap navigation bar.

And, here is what the above navigation bar may look like on a phone or small tablet:

Smart phone view of Bootstrap navigation bar.

Smart phone view of Bootstrap navigation bar.

Notice how in the above screenshot demonstrates that the navigation bar has collapsed. Now, there is a small button on the right with three lines (ie, from the icon-bar CSS class). This button is likely very familiar to many users these days and allows a user to access the menu items on smaller form factors.

For more information on Bootstrap’s navigation bar go to w3schools.


  1. I really appreciate this post. I’ve been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thank you again

  2. Hi there very nice site!! Man .. Excellent .. Wonderful .. I will bookmark your website and take the feeds also…I am happy to seek out a lot of helpful info here in the publish, we want work out more strategies on this regard, thank you for sharing.

  3. Excellent web site. Plenty of helpful info here. I’m sending it to a few friends ans additionally sharing in delicious. And certainly, thank you on your effort!

  4. You have brought up a very superb details, regards for the post.

  5. Some truly superb articles on this site, regards for contribution.

Leave a Reply

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