HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Nav Menus

If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:

Example

<ul class="nav">
 <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" href="#">Link</a>
 </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
You can click on above box to edit the code and run again.

Aligned Nav

Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.

Nav

Left-aligned nav (default):

Centered nav:

Right-aligned nav:

Example

 <!-- Centered nav -->
 <ul class="nav justify-content-center">

 <!-- Right-aligned nav -->
 <ul class="nav justify-content-end">
You can click on above box to edit the code and run again.

Vertical Nav

Add the .flex-column class to create a vertical nav:

Example

 <ul class="nav flex-column">
You can click on above box to edit the code and run again.

Tabs

Turn the nav menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link. If you want the tabs to be togglable, see the last example on this page.

Example

 <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
 < 
  • 
    <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
   <a class="nav-link" href="#">Link</a>
  v/li>
 <li class="nav-item">
    va class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
    • You can click on above box to edit the code and run again.

    Pills

    Turn the nav menu into navigation pills with the .nav-pills class. If you want the pills to be togglable, see the last example on this page.

    Example

     <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="#">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="#">Disabled</a>
  </li>
</ul>
    You can click on above box to edit the code and run again.

    Justified Tabs/pills

    Justify the tabs/pills with the .nav-justified class (equal width):


    Justified tabs:

    Example

     <ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
    You can click on above box to edit the code and run again.

    Pills with Dropdown

    Example

     <ul class="nav nav-pills">
  <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-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li>Link 1</a></li>
      <li>Link 2</a></li>
     <li>Link 3</a></li>
   </ul>
 </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
   <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
    You can click on above box to edit the code and run again.

    Tabs with Dropdown

    Example

     <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-bs-toggle="dropdown" href="#">Dropdown </a>
     <ul class="dropdown-menu">
       <li>Link 1 </a> </li>
       <li>Link 2 </a> </li>
      <li>Link 3 </a> </li>
     </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link </a>
   </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled </a>
   </li>
 </ul>
    You can click on above box to edit the code and run again.

    Toggleable / Dynamic Tabs

    To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.

    If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:

    Toggleable Tabs

    HOME

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Example

     <!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1v/a>
  </li>
 <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
 </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...v/div>
  <div class="tab-pane container fade" id="menu1">...v/div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>
    You can click on above box to edit the code and run again.

    Output