Bootstrap 4 Tutorial
BS4 Navs
Previous Page
Next Page

Bootstrap 4 Nav: Tabs and Pills

Bootstrap 4 nav provides a simple and easy way to create horizontal and vertical nav components like tabs and pills. It has other different properties and features that make the navs component more elegant.

Steps To Create Horizontal Nav Using Bootstrap

  • Step 1: Provide id="id-of-collapse-element" and .collapse to the collapsible element .
  • Step 2: Add .nav to the <ul> element base class.
  • Step 3: Add .nav-item to the <li> element base class.
  • Step 4: Add .nav-link to the <a> element base class.
Example

General Syntax 

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

Source Code 

	
		<div class="container mt-4">
  <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>
Try it yourself

Source Code : Output

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

Horizontal Nav Allignment

  • 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.
Example

Left Alignment

Center Alignment

Right Alignment

Vertical Alignment

General Syntax 

		<nav class="nav justify-content-center"></nav>
<nav class="nav justify-content-end"></nav>
<nav class="nav flex-column"></nav>

Source Code 

	
		<div class="container my-2">
  <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 yourself

Source Code : Output

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.

Bootstrap 4 Tabs

Steps To Create Bootstrap 4 Tab Menu

  • Step1: Add .nav and .nav-tabs to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3: Add .nav-link to the <a> element base class.
Example

General Syntax 

		<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Tab Item</a>
  </li>
</ul>

Source Code 

	
		<div class="container my-2">
  <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>
Try it yourself

Note: 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
Example

General Syntax 

		<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Tab Item1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Tab Item2</a>
  </li>
</ul>
Try It Now

Source Code 

	
		<div class="container mt-4">
  <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 yourself

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

  • Step1: Add .nav and .nav-pills to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3: 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="#">Pills Item</a>
  </li>
</ul>

Source Code 

	
		<div class="container mt-4">
  <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>
<!--/container-->
Try it yourself

Note: 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
Example

General Syntax 

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

Source Code 

	
		<div class="container mt-4">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled Link3</a>
    </li>
  </ul>
</div>
Try it yourself

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

  • Step1: Add .nav, .nav-pills & .flex-column to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3: Add .nav-link to the <a> element base class.
Example

General Syntax 

		<nav class="nav nav-pills flex-column"></nav>
Try It Now

Source Code 

	
		<div class="container mt-4">
  <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>
Try it yourself

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

Alignment Of Nav/Pill Menu

Full Width Nav Alignment

To extend navigation nav into whole available width,use .nav-fill to the <ul> having class either .nav .nav-pills or .nav .nav-tabs.Please keep in mind that every nav item will not be same width.

General Syntax 

		<ul class="nav nav-pills nav-fill"></ul>
Try It Now

Source Code 

	
		<div class="container my-2">
  <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
      <a class="nav-link active" href="#">Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Development</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Seo</a>
    </li>
  </ul>
</div>
Try it yourself

Note: Navbar component can be extended within full available width,by assigning .nav-fill to the <ul> container base class.

Assigning Equal Width To The Nav/Pill Menu

To align equal width of nav/pill menu item, use .nav-justified to the <ul> having class either .nav .nav-pills or .nav .nav-tabs

General Syntax 

		<ul class="nav nav-pills nav-justified"></ul>
Try It Now

Source Code 

	
		<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Link1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link 4</a>
  </li>
</ul>
Try it yourself

Note: Equal width inside nav/pill menu item can be created very easily by just using .nav-justified.These class must be assigned to the nav container or pill container base class.

Creating Nav Based Navigation

  • Step1: Add .nav & .nav-tabs to the <nav> element base class.
  • Step2: Add .nav-item & .nav-link to the <a> element base class.

General Syntax 

		<nav class="nav nav-tabs">
  <a href="#" class="nav-item nav-link active">Link 1</a>
  <a href="#" class="nav-item nav-link">Link 2</a>
  <a href="#" class="nav-item nav-link">Link 3</a>
</nav>
Try It Now

Source Code 

	
		<div class="container- my-3">
  <nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Link 1</a>
    <a href="#" class="nav-item nav-link">Link 2</a>
    <a href="#" class="nav-item nav-link">Link 3</a>
  </nav>
</div>
Try it yourself

Note: To create nav based navigation,assign .nav & .nav-tabs to the <nav> element base class & assign .nav-link and .nav-item to the <a> element base class.

Creating Pill Based Navigation

  • Step1: Add .nav & .nav-pills to the <nav> element base class.
  • Step2: Add .nav-item & .nav-link to the <a> element base class.

General Syntax 

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

Source Code 

	
		<div class="container- my-3">
  <nav class="nav nav-pills">
    <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">Contact</a>
  </nav>
</div>
Try it yourself

Note: To create pill based navigation,assign .nav & .nav-pills to the <nav> element base class & assign .nav-link and .nav-item to the <a> element base class.

Boostrap Tabs With Dropdown

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

General Syntax 

		<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link1</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="#">Link3</a>
  </li>
</ul>

Source Code 

	
		<div class="container my-3">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Link1</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="#">Link3</a>
    </li>
  </ul>
</div>
Try it yourself

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

Bootstrap Pill With Dropdown

Follow pill and dropdown concept to make boostrap tab with dropdown menu.

General Syntax 

		<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Service 1</a>
      <a class="dropdown-item" href="#">Service 2</a>
      <a class="dropdown-item" href="#">Service 3</a>
    </div>
  </li>  
  <li class="nav-item">
    <a class="nav-link active" href="#">Event</a>
  </li>
 
</ul>

Source Code 

	
		<div class="container my-3">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Service 1</a>
        <a class="dropdown-item" href="#">Service 2</a>
        <a class="dropdown-item" href="#">Service 3</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Event</a>
    </li>
  </ul>
</div>
<!--/source_code_result--display-->
Try it yourself

Note: Bootstrap pill with dropdown can be created very easiy by using pill and dropdown concept.

Our Tutorials

Bootstrap 4 Nav
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS