Bootstrap Navbar

Bootstrap navbar has collapsed and expanded features. It works on the basis of available screen size. Navbar expands features to expand the navbar in the available space at the mention breakpoint while as navbar collapse collapses the navbar in the small devices.

Bootstrap 4 Basic Horizontal Navbar

Step To Create Bootstrap Basic Horizontal Navbar Menu

  • Step 1: Add .navbar,.navbar-expand{-sm|-md|-lg|-xl} & background color utility.navbar-light & .bg-light to <nav> base class.
  • Step 2: Add .navbar-nav to <ul> base class.
  • Step 3: Add .nav-item to <li> base class.
  • Step 4: Add .nav-link to <a> base class.

General Syntax

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>
</nav>
    
Try It Now

Source Code

    <div class="container my-3 text-center">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <ul class="navbar-nav mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </nav>
</div>
<!--/container-->
  
Try it yourself

Source Code : Output

Navbar Brand & Collapsing

bootstrap .navbar-brand shows brand name of company or brand logo.

By applying .navbar-brand class on images, It adjusts image to fit vertically with respect to navbar.

Navbar: Brand Name

Source Code

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar Brand</a>
    <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Navbar: Brand Logo

Place brand logo inside .navbar-brand element.

Source Code

    <nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand mt-0" href="#">
      <img src="../images/logo.png" alt="brand logo" width="50" height="50" />
    </a>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Navbar: Collapsing

Use collapse concept inside navbar to create collapsing navbar.

Source Code

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
       </ul>
    </div>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Navbar: Vertical Navbar

Step To Create Vertical Navbar Menu

  • Step 1:Add .navbar & background color utility.navbar-light .bg-light to <nav> base class.
  • Step 2:Add .navbar-nav to <ul> base class.
  • Step 3:Add .nav-item to <li> base class.
  • Step 4:Add .nav-link to <a> base class.

Source Code

    <nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
  
Try it yourself

Source Code : Output

Centered Navbar

Add the .justify-content-center class to center the navigation bar.

  • Step 1:Add .navbar,.navbar-expand-sm,.justify-content-center & background color utility.navbar-light .bg-light to <nav> base class.
  • Step 2:Add .navbar-nav to <ul> element base class.
  • Step 3:Add .nav-item to <li> element base class.
  • Step 4:Add .nav-link to <a> element base class.

Source Code

    <nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
  </ul>
</nav>
  
Try it yourself

Source Code : Output

Navbar: Background Color

To change navbar background color , Navbar background color can be change very easily. use .navbar-dark for dark background-color and .navbar-light for light background-color. Then customize it, with the background-color utility classes i.e bg-*

General Syntax

      <nav class="navbar navbar-dark bg-dark"> </nav>
    
Try It Now

Source Code : Output

Bootstrap Navbar With Dropdown

Source Code

    <nav class="navbar navbar-expand-md navbar-light bg-light">
  <a href="#" class="navbar-brand">Brand Name</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 justify-content-between" id="navbarCollapse">
    <div class="navbar-nav">
      <a href="#" class="nav-item nav-link active">Home</a>
      <a href="#" class="nav-item nav-link">Profile</a>
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">Inbox</a>
          <a href="#" class="dropdown-item">Sent</a>
          <a href="#" class="dropdown-item">Drafts</a>
        </div>
      </div>
    </div>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Search Form With Navbar

Source Code

    <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Note:Here,search form and button both are placed inside navbar.

Navbar Brand With Search Form

General Syntax

    	
 <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar Brand</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
   

Source Code : Output

Note:To place <form> element inside navbar, assign .d-flex to the <form> element base class and assign .form-control to the <form> input control.

Navbar With Addon

Source Code

    <nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav>
  
Try it yourself

Source Code : Output

Note:To place <form> element inside navbar, assign .container-fluid to the <form> element base class and assign .input-group to the form controls container base class.At the end,place addon inside <span> element and assign .input-group-text to the <span> element base class and also assign .form-control to the input form control base class.

Navbar: Text

Source Code

    <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
      <span class="navbar-text"> Navbar text</span>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Note: To place text inside the navbar,write text information inside the <span> element and provide .navbar-text to the <span> element base class.

Navbar: Container

General Syntax

      <div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>
    
Try It Now

Source Code

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="..">Navbar</a>
  </div>
</nav>
  
Try it yourself

Source Code : Output

Note: Navbar and container both are used at a time.

Navbar: Fixed Top

The navigation bar can also be fixed at the top or at the bottom of the page. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.The .fixed-top class makes the navigation bar fixed at the top:

General Syntax

      <nav class="navbar fixed-top navbar-light bg-light"> </nav>
    
Try It Now

Source Code

    <nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
  
Try it yourself

Note: To create fixed top navbar,assign .fixed-top to the navbar base class.

Navbar: Fixed Bottom

Use the .fixed-bottom class to make the navbar stay at the bottom of the page.

General Syntax

      <nav class="navbar fixed-bottom navbar-light bg-light"></nav>
    
Try It Now

Source Code

    <nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
  
Try it yourself

Note: To create fixed bottom navbar,assign .fixed-bottom to the <nav> element base class.

Navabr: Sticky Top

Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll the page. This class does not work in IE11 and earlier (will treat it as position: relative).

General Syntax

      <nav class="navbar sticky-top navbar-light bg-light"></nav>
    
Try It Now

Source Code

    <nav class="navbar sticky-top navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Sticky top</a>
   </div>
</nav>
  
Try it yourself

Note: To create sticky top navbar,assign .sticky-top to the <nav> element base class.

Online Test / Quiz
Web Tutorials
Bootstrap Navbar
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS