Bootstrap 5 Tutorial
BS5 Navs & Tabs
Previous Page
Next Page

Bootstrap Navs And Bootstrap Tabs

Bootstrap navs and Bootstrap tabs provide a simple and easy way to create horizontal and vertical nav & tab components.

Steps To Create Horizontal Nav component

  • Step1: Add .nav to the nav container(<ul>) or (<ol>).
  • Step2: Add .nav-item to the (<li>) element base class.
  • Step3: Add .nav-link to the (<a>) element base class.

Navigation can also be created using <nav> element.Folowings are the steps to create nav.

  • Step1: Add .nav to the nav container(<nav>) element.
  • Step2: Add .nav-link to the (<a>) element base class.

General Syntax 

      <nav class="nav">
  <a class="nav-link active" href="#">Active</a>
</nav>
Try It Now

Source Code 

    <nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link1</a>
  <a class="nav-link" href="#">Link2</a>
  <a class="nav-link disabled" href="#">Disabled Link</a>
</nav>
Try it yourself

Source Code : Output

Note: Follow the above mention steps to create bootstrap horizontal nav component using <nav> and <a> element.

Active/Disabled Navs & Tabs

To make active nav item,use .active to the <a> element base class.

General Syntax 

      <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link</a>
  </li>
</ul>
Try It Now

Source Code 

    <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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 Link4</a>
  </li>
</ul>
Try it yourself

Source Code : Output

Note: To create active nav link,assign .active to the <a> element base class while to make disabled nav link,assign .disabled to the <a> element base class.

To make disabled nav item,use .disabled to the <a> element base class.

General Syntax 

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

Source Code 

    <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link</a>
  </li>
</ul>
Try it yourself

Source Code : Output

Note:To create disabled nav link,assign .disabled to the <a> element base class.

Horizontal Alignment

By default navs is left aligned, but it can changed either center or right using flexbox utilities classes.

Center Alignment

Add .justify-content-center to the nav container base class to align nav-item to the horizontal center.

General Syntax 

      <ul class="nav justify-content-center">   </ul>
Try It Now

Source Code 

    <ul class="nav justify-content-center">
  <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>
Try it yourself

Source Code : Output

Note:The .justify-content-center is used to align nav to the horizontally center.

Right Alignment

Add .justify-content-end to the nav container base class to align nav item right direction of the web page.

General Syntax 

      <ul class="nav justify-content-end"> </ul>
Try It Now

Source Code 

    <ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">App Design</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Web Design</a>
  </li>
</ul>
Try it yourself

Source Code : Output

Note: Nav item can be aligned right side of the web page by .justify-content-end.These class will be applied on the nav item container base class.

Vertical Nav

Steps to create vertical nav system.

  • Step1:Add .nav,& .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.

General Syntax 

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

Source Code 

    <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">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>
</ul>
Try it yourself

Source Code : Output

Vertical Nav using <nav> Element

General Syntax 

      <nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Link1</a>
</nav>
Try It Now

Source Code 

    <nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Link1</a>
  <a class="nav-link" href="#">Link2</a>
  <a class="nav-link" href="#">Link3</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link4</a>
</nav>
Try it yourself

Source Code : Output

Note:Follow the above concept to create vertical nav using <nav> element.

Tabs

Steps to create tab menus:

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

Source Code 

    <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>
Try it yourself

Source Code : Output

Pills

Steps to create pills:

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

Source Code 

    <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="#">Graphics Design</a></li>
  <li class="nav-item"><a class="nav-link" href="#">App Design</a></li>
</ul>
Try it yourself

Source Code : Output

Step To Create Vertical Pills

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

Source Code 

    <ul class="nav nav-pills flex-column">
  <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" href="#">App Design</a>
  </li>
</ul>
Try it yourself

Source Code : Output

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.

Source Code 

    <ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">App 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="#">SEO</a>
  </li>
</ul>
Try it yourself

Source Code : Output

Full Width Tab Alignment

Source Code 

    <ul class="nav nav-tabs nav-fill">
  <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" href="#">App Design</a>
  </li>
</ul>
Try it yourself

Source Code : Output

Assigning Equal Width To 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.

Source Code 

    <ul class="nav nav-pills nav-justified">
  <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>
</ul>
Try it yourself

Source Code : Output

Creating Nav Based Navigation

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

Source Code 

    <nav class="nav nav-tabs">
  <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">Services</a>
  <a href="#" class="nav-item nav-link disabled" tabindex="-1">Contact</a>
</nav>
Try it yourself

Source Code : Output

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.

Source Code 

    <nav class="nav nav-pills">
  <a href="#" class="nav-item nav-link active">Home</a>
  <a href="#" class="nav-item nav-link">About</a>
</nav>
Try it yourself

Source Code : Output

Bootstrap Tabs With Dropdown

Bootstrap tabs/pills menus and dropdown concept are used to make dropdown tabs/pills menu.

Source Code 

    <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Services</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Services1</a></li>
      <li><a class="dropdown-item" href="#">Services2</a></li>
      <li><a class="dropdown-item" href="#">Services3</a></li>
    </ul>
  </li>
</ul>
Try it yourself

Source Code : Output

Bootstrap Pills With Dropdown

Source Code 

    <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Services</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Services1</a></li>
      <li><a class="dropdown-item" href="#">Services2</a></li>
      <li><a class="dropdown-item" href="#">Services3</a></li>
    </ul>
  </li>
</ul>
Try it yourself

Source Code : Output

Online Test / Quiz
Question set 1
Web Tutorials
Bootstrap Navs And Bootstrap Tabs
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