How to Make Bootstrap 3 NavBar

In a website a common component is navigation bar and and it used to navigate to proper page according to its link , so in this tutorial we are going to learn Bootstrap 3 Navigation Bar or navbar which is mobile responsive and have in 2 types of color,

Basic or default nav bar

To make a basic or default nav take a tag nav and use class name .navbar and .navbar-default to it and inside that take a div with class name .container or .container-fluid and to make a navbar header take a div with class name .navbar-header and inside that take a anchar tag with class name .navbar-brand and write some text now again inside container div write a unorder list and use class name .navbar and .navbar-default and inside ir write some li and you have developed a default navbar using bootstrap 3.

Example:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Inverse Navigation Bar

To make a incerse that is black navbar you have to use class name .navbar-inverse in the position of navbar-default in tag nav

Example:

<nav class="navbar navbar-inverse">

Dropdown in navigation bar

In which li you want to make dropdown use class name .dropdown and in the anchar tag on click the dropdown will open, there use class name .dropdown-toggle with data-toggle="dropdown" now inside the dropdown li create another unordered list and give class name .dropdown-menu to the ul tag

Example:

<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>

Right align nav bar

you can use multiple ul inside a nav and give class name .navbar-right to the ul which you want to align or pull right.

Example:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Buttons in nav bar

You want to use a button inside a nav then make a button inside the container with button class of bootstrap and use another class name .navbar-btn with the default classes to the button

Example:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>

Forms in navbar

as like button if you want to make or place a form inside the navbar then first create a form inside the navbar and give there a class name .navbar-form you can make it allign left or eight by using class name .navbar-left or .navbar-right to the tag form.

Example:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <form class="navbar-form navbar-right" action="/action_page.php">
      <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>

Text on navbar

as like button in navbar you can place text on bootstrap 3 nav bar and to put that use class name .navbar-text to a paragraph inside the navbar container.

Example:

<nav class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <p class="navbar-text">Some text</p>
</nav>

Fixed top nav bar

If you want to make a top fixed navbar then use class name .navbar-fixed-top on the tag nav with class name .nav

Example:

<nav class="navbar navbar-inverse navbar-fixed-top">

Fixed buttom nav bar

as like fixed top nsv you make buttom fixed nav also by placing the class name .navbar-fixed-bottom to the tag nav with class name .nav

Example:

<nav class="navbar navbar-inverse navbar-fixed-bottom">

Collapiable nav bar

To make a collapsible nav first you have to create a default or inverse nav then keep the ul or unordered list portion in a div and give class name .collapse and .navbar-collapse to it and give any unic id for the page and then inside the header of the navbar create another button on click the collapisable nav will open and use class name .navbar-toggle and data-toggle="collapse" and data-target="#myNavbar" here myNavbar is the id of the ul containing div and inside the button you can give some icons or text as below.

Example:

<nav class="navbar navbar-inverse">
  <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> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

In this tutorial we have learned Bootstrap 3 Navigation Bar or navbar, Please provide your comment to make the site better and more usefull.

Thanks for reading

Share The Post On -

Add a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.