Bootstrap Navigation bar

Navigation Bars

In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen size. The <nav class="navbar navbar-default"> class is used to create a standard navigation bar at the top of the page. Let us see an example of Bootstrap Navigation Bars:
<nav class="navbar navbar-default">  
  <div class="container-fluid">  
    <div class="navbar-header">  
      <a class="navbar-brand" href="#">Bootstrap</a>  
    </div>  
    <ul class="nav navbar-nav">  
      <li class="active"><a href="#">Home</a></li>  
      <li><a href="#">About</a></li>  
      <li><a href="#">Service</a></li>  
      <li><a href="#">About us</a></li>  
    </ul>  
  </div>  
</nav>
Try Now

Bootstrap Inverted Navigation Bar

In bootstrap, Inverted navigation bar is used to create background black of the navigation . We have to change .navbar-default class into .navbar-inverse. Let us see an example of Bootstrap Inverted Navigation Bars:
<nav class="navbar navbar-inverse">  
  <div class="container-fluid">  
    <div class="navbar-header">  
      <a class="navbar-brand" href="#">Bootstrap</a>  
    </div>  
    <ul class="nav navbar-nav">  
      <li class="active"><a href="#">Home</a></li>  
      <li><a href="#">About</a></li>  
      <li><a href="#">Service</a></li>  
      <li><a href="#">About us</a></li>  
    </ul>  
  </div>  
</nav>
Try Now

Navigation Bar With Dropdown

We can add dropdown menu with the navigation bars by using its class. The following example will help us how to implement it. Let us see an example of Bootstrap Navigation Bar With Dropdown:
<nav class="navbar navbar-inverse">  
  <div class="container-fluid">  
    <div class="navbar-header">  
      <a class="navbar-brand" href="#">Bootstrap</a>  
    </div>  
    <ul class="nav navbar-nav">  
      <li class="active"><a href="#">Home</a></li>  
      <li class="dropdown">  
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1  
        <span class="caret"></span></a>  
        <ul class="dropdown-menu">  
          <li><a href="#">Page 1-1</a></li>  
          <li><a href="#">Page 1-2</a></li>  
          <li><a href="#">Page 1-3</a></li>  
        </ul>  
      </li>  
      <li><a href="#">Page 2</a></li>  
      <li><a href="#">Page 3</a></li>  
    </ul>  
  </div>  
</nav>
Try Now

Bootstrap Right-Aligned Navigation Bar

We can align the navigation bar on the right side by using .navbar-right class. Let us see an example of Bootstrap Right-Aligned Navigation Bar:
<nav class="navbar navbar-inverse">  
  <div class="container-fluid">  
    <div class="navbar-header">  
      <a class="navbar-brand" href="#">Bootstrap</a>  
    </div>  
    <ul class="nav navbar-nav">  
      <li class="active"><a href="#">Home</a></li>  
      <li><a href="#">service</a></li>  
      <li><a href="#">Contact us</a></li>  
    </ul>  
    <form class="navbar-form navbar-right">  
      <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>
Try Now



ADVERTISEMENT
ADVERTISEMENT