i2tutorials

Bootstrap Navbars

Bootstrap Navbars

 

A navigation bar is to create a responsive navigation header that is placed at the top of the page, and you can collapse or extend it according to the screen size.

 

Basic Navbar:

 

To add links inside the navbar, use a <ul> element with class=”navbar-nav”. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">nav</a>
        <a href="#" class="nav-item nav-link">nav1</a>
        <a href="#" class="nav-item nav-link">nav2</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">nav3</a>
      </div>
      <div class="navbar-nav ml-auto">
        <a href="#" class="nav-item nav-link">nav4</a>
      </div>
   </div>
  </nav>
</div>

 

OUTPUT:

 

 

Collapsing The Navigation Bar:

 

Create a collapsible navigation bar, use a button with in class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#”. Then wrap the navbar content (links) inside a div element with class=”collapse navbar-collapse”, followed by an id that matches the data-target of the button.

 

Example:

 

<div class="container">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="collapsibleNavbar">
  <ul class="navbar-nav">
   <li class="nav-item">
    <a class="nav-link" href="#">nav</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" href="#">nav1</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" href="#">nav2</a>
   </li>   
  </ul>
 </div> 
</nav>
</div>
<div class="container">
<h4>Collapsing The Navigation Bar</h4>
</div>

 

OUTPUT:

 

 

 

Adding Dropdowns to Navbar:

 

The navbar can also include a drop-down menu by adding the dropdown code to the <li> element with the help of the .dropdown class.

 

Example:

 

<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <a class="navbar-brand" href="#">Logo</a>
 <!-- Links -->
 <ul class="navbar-nav">
  <li class="nav-item">
   <a class="nav-link" href="#">nav 1</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">nav 2</a>
  </li>
  <!-- Dropdown -->
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
    Dropdown
   </a>
   <div class="dropdown-menu">
    <a class="dropdown-item" href="#">nav 1</a>
    <a class="dropdown-item" href="#">nav 2</a>
    <a class="dropdown-item" href="#">nav 3</a>
   </div>
  </li>
 </ul>
</nav>
<br>
 </div>
<div class="container">
 <h3>Navbar With Dropdown</h3>
</div>

 

OUTPUT:

 

 

 

Placing Search Form inside Navbar:

 

Search form is a very common component of the navbars and you have seen it on various websites. You can place various form controls and components within a navbar using the class .form-inline on the <form> element.

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a href="#" class="navbar-brand">LOGO</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">nav</a>
        <a href="#" class="nav-item nav-link">nav1</a>
        <a href="#" class="nav-item nav-link">nav2</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>
</div>

 

OUTPUT:

 

 

Changing the Color Scheme of Navbars:

 

Use any of the .bg-color classes to change the background color of the navbar ,Change the background color of the navbar by using the .navbar-light for the light background colors (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light) and also apply the CSS background-color property on the .navbar element.

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse2">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse2">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
     <form class="form-inline ml-auto">
       <input type="text" class="form-control mr-sm-2" placeholder="Search">
       <button type="submit" class="btn btn-outline-light">Search</button>
     </form>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-secondary">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse3">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse3">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-success">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse4">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse4">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-info">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse5">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse5">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-danger">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse6">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse6">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-warning">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse7">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse7">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">About</a>
        <a href="#" class="nav-item nav-link">Products</a>
      </div>
      <form class="form-inline ml-auto">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button type="submit" class="btn btn-outline-light">Search</button>
      </form>
    </div>
  </nav>
</div>

 

OUTPUT:

 

 

Bootstrap Fixed Navbar:

 

Create a navbar that is fixed on the top or bottom of the content on the page.

 

Fixed to Top Navbar:

 

Use a class .fixed-top to the .navbar element to fix the navbar at the top of the viewport.

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">nav</a>
        <a href="#" class="nav-item nav-link">nav1</a>
        <a href="#" class="nav-item nav-link">nav12</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">nav3</a>
      </div>
      <div class="navbar-nav ml-auto">
        <a href="#" class="nav-item nav-link">Login</a>
      </div>
    </div>
  </nav>
  <!-- Demo Content -->   
  <div class="container">
              <div class="jumbotron">
        <h1>Fixed Top Navbar</h1>
        </div>
  </div>
</div>

 

OUTPUT:

 

 

 

Fixed to Bottom Navbar:

 

Use a class .fixed-bottomto the .navbar element to fix the navbar at the bottomof the viewport.

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
    <a href="#" class="navbar-brand">LOGO</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">nav</a>
        <a href="#" class="nav-item nav-link">nav1</a>
        <a href="#" class="nav-item nav-link">nav2</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">nav3</a>
      </div>
      <div class="navbar-nav ml-auto">
        <a href="#" class="nav-item nav-link">Login</a>
      </div>
    </div>
</nav>
<!-- Demo Content -->
<div class="container">
             <div class="jumbotron">
      <h1>Fixed Bottom Navbar</h1>
      </div>
  </div>
</div>

 

OUTPUT:

 

 

Sticky Top Navbar:

 

Create a sticky top navbar that scrolls with the page until it reaches the top, by simply using the .sticky-top class on the .navbar element.

 

Example:

 

<div class="container">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top mt-5">
    <a href="#" class="navbar-brand">LOGO</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">nav</a>
        <a href="#" class="nav-item nav-link">nav1</a>
        <a href="#" class="nav-item nav-link">nav2</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">nav3</a>
      </div>
      <div class="navbar-nav ml-auto">
        <a href="#" class="nav-item nav-link">Login</a>
      </div>
    </div>
  </nav>
  <!-- Demo Content -->   
  <div class="container">
               <div class="jumbotron mt-4">
        <h1>Sticky Top Navbar</h1>
        </div>
      </div>
 </div>

 

OUTPUT:

 

 

Tip: Place the fixed .navbar content inside the .container or .container-fluid for proper padding and alignment with the rest of the  page.

 

 

Exit mobile version