Bootstrap 4 Navs And Pills

Bootstrap 4 navs and pills provide a simple and easy way to create horizontal and vertical nav components like tabs and pills.

Steps To Create Bootstrap 4 Horizontal Nav

Provide id="id-of-collapse-element" and .collapse to the collapsible element .
Add .nav to the <ul> element base class.
Add .nav-item to the <li> element base class.
Add .nav-link to the <a> element base class.

Horizontal Nav Example

General Syntax

      <ul class="nav">
   <li class="nav-item">
     <a class="nav-link" href="#">Nav Link </a>
   </li>
 </ul>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap Navs</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Web Development</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Testing</a>
    </li>
  </ul>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap Navs

In the above example,.nav is assigned to the <ul> ,.nav-item to the <li> & .nav-link to the <a> element base class.

Bootstrap nav creates horizontal and vertical navigation components easily. It has other different properties and features that make the nav component more elegant.

        Horizontal Nav Alignment
By default nav is left aligned .
To align center ,you have to assign .justify-content-center to the <nav> container. 
To align right ,you have to use .justify-content-end to the <nav> container. 
To align vertical ,you have to use .flex-column to the <nav> container. 

                                                                                    

General Syntax

      <b> Basic Nav</b>
<nav class="nav">
  <a href="#" class="nav-item nav-link active">Learn HTML</a>
  <a href="#" class="nav-item nav-link">Learn CSS</a>
  <a href="#" class="nav-item nav-link">Learn Bootstrap</a>
</nav>
<b>Center Alignment</b>
<nav class="nav justify-content-center">
  <a href="#" class="nav-item nav-link active">Learn HTML</a>
  <a href="#" class="nav-item nav-link">Learn CSS</a>
  <a href="#" class="nav-item nav-link">Learn Bootstrap</a>
</nav>
<b>Right Alignment</b>
<nav class="nav justify-content-end">
  <a href="#" class="nav-item nav-link active">Learn HTML</a>
  <a href="#" class="nav-item nav-link">Learn CSS</a>
  <a href="#" class="nav-item nav-link">Learn Bootstrap</a>
</nav>
<b>Vertical Alignment</b>
<nav class="nav flex-column">
  <a href="#" class="nav-item nav-link active">Learn HTML</a>
  <a href="#" class="nav-item nav-link">Learn CSS</a>
  <a href="#" class="nav-item nav-link">Learn Bootstrap</a>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Navs Alignment</b>
  <nav class="nav justify-content-center">
    <a href="#" class="nav-item nav-link active">Learn HTML</a>
    <a href="#" class="nav-item nav-link">Learn CSS</a>
    <a href="#" class="nav-item nav-link">Learn Bootstrap</a>
    <a href="#" class="nav-item nav-link disabled">Seo</a>
  </nav>
</div>

Try it now

Source Code: Output

Bootstrap Navs Alignment

Note: In the above example,flexbox utility classes are used to align nav component in the left, center and right direction.Please keep in mind that nav component is aligned by default in the left direction.To align center use .justify-content-center & to align right use .justify-content-end.

        Tabs

Steps To Create Tab Menu

 Add .nav and .nav-tabs to the <ul> element base class. 
 Add .nav-item to the <li> element base class. 
 Add .nav-link to the <a> element base class.

General Syntax

      <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">App Design</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">App Development</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Software</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Testing</a>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Tabs</b>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">App Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Development</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Software</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Testing</a>
    </li>
  </ul>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap Tabs

In the above example,bootstrap tabs can be created by assigning .nav ,.nav-tabs to the <ul> element base class ,.nav-item to the <li> element base class and .nav-link to the <a> element base class.

        Tabs: Active/Disabled
 To make tab link active use .active to the <a> element base class. 
 To make tab link disabled use .disabled to the <a> element base class

General Syntax

      <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Web design</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Web Development</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Graphics Design</a>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Tabs</b>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">App Design</a>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

Bootstrap Tabs

To make tab item active, assign .active to the <a> element base class while to make disabled tab item,assign .disabled to the <a> element base class.

        Step To Create Pills Menus

	 Add .nav and .nav-pills to the  <ul> element base class. 

       Add .nav-item to the <li> element base class. 

   Add .nav-link to the  <a> element base class.

General Syntax

      <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Web design</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Web Development</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Graphics Design</a>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Pills</b>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Web design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Web Development</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

Bootstrap Pills

In the above example ,.nav,.nav-pills,.nav-item & .nav-link are used to make bootstrap pill menu.

        Pills: Active/Disable Link Item

To make tab link active , use.active to the <a> element base class. 
To make tab link disabled, use.disabled to the <a> element base class

General Syntax

      <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled " href="#">Link2</a>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap Pills</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Link2</a>
    </li>
  </ul>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap Pills

Note: In the above example , active and disabled link item can be created inside pills menu by assigning .active & .disabled to the element base class.

        Step To Create Vertical Pills Menus

 Add .nav, .nav-pills & .flex-column to the <ul> element base class. 

   Add .nav-item to the <li> element base class. 

	 Add .nav-link to the <a> element base class.

General Syntax

      <nav class="nav nav-pills flex-column">

      <a href="#" class="nav-item nav-link active">
          <i class="fa fa-laptop" aria-hidden="true"></i> Design
      </a>

      <a href="#" class="nav-item nav-link">
         <i class="fa fa-creative-commons" aria-hidden="true"></i> Creative
      </a>
      
      <a href="#" class="nav-item nav-link">
          <i class="fa fa-mobile" aria-hidden="true"></i> App
      </a>

  </nav>

Try it now

Source Code

          <div class="container mt-4">
  
  <h2>Bootstrap Vertical Pills</h2>
  
  <nav class="nav nav-pills flex-column">
    
    <a href="#" class="nav-item nav-link active">
      
      <i class="fa fa-laptop" aria-hidden="true"></i> Design
      
    </a>
    
    <a href="#" class="nav-item nav-link">
      
      <i class="fa fa-creative-commons" aria-hidden="true"></i> Creative
      
    </a>
    
    <a href="#" class="nav-item nav-link">
      
      <i class="fa fa-mobile" aria-hidden="true"></i> App
      
    </a>
    
  </nav>
  
  </div><!--/container-->

Try it now

Source Code: Output

Bootstrap Vertical Pills

Note: To create vertical pill menu,assign .flex-column to the pills container(<nav>) base class.

Bootstrap Tabs With Dropdown

Bootstrap Tabs With Dropdown can be made by utilizing tabs/pills and dropdown concept.

Example

General Syntax

      <ul class="nav nav-tabs">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap Tab With Dropdown</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled Link</a>
    </li>
  </ul>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap Tab With Dropdown

Note: Bootstrap tab with dropdown can be created very easily by using tabs and dropdown concept.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4