Bootstrap Tabs and Pills

Bootstrap Menus

In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:

Example -

Bootstrap Tabs

Tabs are created with <ul class="nav nav-tabs">:

Example -

<div class="container">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <br>
  <p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>

</body>
</html>

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

Example -

<div class="container">
  <h3>Tabs With Dropdown Menu</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>                        
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

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

Example -

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>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.</p>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap Pills

You can create pills with <ul class="nav nav-pills">. You can also mark the current page with <li class="active">.

Example -

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

Example -

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

Example -

Bootstrap Toggleable Dynamic Pills

It is same as toggleable dynamic tabs, the only change is the data-toggle attribute to data-toggle="pill" .

Example -

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Case</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
  
<div class="container">  
  <h2>Dynamic Pills</h2>  
  <ul class="nav nav-pills">  
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>  
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>  
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>  
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>  
  </ul>  
    
  <div class="tab-content">  
    <div id="home" class="tab-pane fade in active">  
      <h3>HOME</h3>  
      <p>A markup language is a programming language that is used make text more interactive and   
        dynamic. It can turn a text into images, tables, links etc.</p>  
    </div>  
    <div id="menu1" class="tab-pane fade">  
      <h3>Menu 1</h3>  
      <p>Java is a high level, robust, secured and object-oriented programming language.</p>  
    </div>  
    <div id="menu2" class="tab-pane fade">  
      <h3>Menu 2</h3>  
      <p>SQL is just a query language, it is not a database. To perform SQL queries,   
      you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>  
    </div>  
    <div id="menu3" class="tab-pane fade">  
      <h3>Menu 3</h3>  
      <p>The C Language is developed for creating system applications that direct   
       interacts to the hardware devices such as drivers, kernals etc.</p>  
    </div>  
  </div>  
</div>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>

Nav Menus

Nav menus are navigation menus used in websites. If you want to create a simple horizontal menu in a website, 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 -

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Nav Example</h2>  
  <h4>Left-aligned nav (default):</h4>  
  <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>  
    
  <h4>Centered nav:</h4>  
  <ul class="nav justify-content-center">  
    <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>    
  <h4>Right-aligned nav:</h4>  
  <ul class="nav justify-content-end">  
    <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>  
</div>  
</body>  
</html>

Vertical Nav

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

Example -

Justified Tabs/ Pills

For justified tabs/pills, add the .nav-justified class (equal width):

Example -

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">  
  <h2>Justified Tabs/Pills Example</h2>  
  <p>To justify tabs/pills (equal width), use the .nav-justified class:</p>  
  <ul class="nav nav-pills nav-justified">  
    <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><br>  
  <h4>Justified tabs:</h4>  
  <ul class="nav nav-tabs nav-justified">  
    <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>  
</div>  
</body>  
</html>