Responsive Nav Using Bootstrap Famework

Bootstrap Framework is become popular to design your web site easily. Nav is a collection navigation links in the header section . Using CSS design , you need little bit knowledge about CSS design to make the Nav Menu , But using Bootstrap , you can make the Nav using some simple coding .

Before start the Bootstrap Framework coding , you need to know that how to Get Start the Bootstrap Framework.

Tabs Style Bootstrap Nav Menu

This is the simple but stylist Nav . The base class is .nav and Nav style sub class .nav-tabs.

 
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Tabs Nav Example

Pills Style Bootstrap Nav Menu

This is the simple but stylist Nav . The base class is .nav and Nav style sub class .nav-pills instead.

  
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Pills Nav Example

Pills cab be design in vertical stacked using the .nav-stacked sub class.

  
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Pills Stacked Nav Example

Dropdowns Style Bootstrap Nav Menu

Drop-downs is the simple but stylist drop-down Navs . The base class is .nav and Nav style sub class .nav-tabs with .dropdown class.

  
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <ul class="nav nav-tabs">
  
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      
    </ul>
  </li>
  
</ul>

</ul>