Bootstrap Tabs and Pills

Bootstrap Menus

Menus are used in most of the web pages. These are defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<h3>Inline List</h3>
<ul class="list-inline">
<li><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></div>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>   </p>

Test it Now

Bootstrap Tabs

You can create a basic navigation tag with <ul class="nav nav-tabs">. You can also mark the current page with <li class="active">.

The following example specifies how to create a simple navigation tab.

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<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>
<p>    </p></div>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<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>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Toggleable / Dynamic Tabs

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, to make tags toggleable.

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

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<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 class="tab-pane fade" id="menu1">
<h3>Menu 1</h3>
<p>Java is a high level, robust, secured and object-oriented programming language.</p>
</div>
<div class="tab-pane fade" id="menu2">
<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 class="tab-pane fade" id="menu3">
<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>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Pills

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

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<h3>Pills</h3>
<ul class="nav nav-pills">
<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></div>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Vertical Pills

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

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<h3>Vertical Pills</h3>
<ul class="nav nav-pills nav-stacked">
<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></div>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<h3>Pills With Dropdown Menu</h3>
<ul class="nav nav-pills nav-stacked">
<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>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap Toggleable Dynamic Pills

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

See this example:

      <title>Bootstrap Case</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <link rel="stylesheet" id="3c27ead91bc5909e10dfc005d17c64d8" data-soledad_pagespeed-delay data-href="https:://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<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 class="tab-pane fade in active" id="home">
<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 class="tab-pane fade" id="menu1">
<h3>Menu 1</h3>
<p>Java is a high level, robust, secured and object-oriented programming language.</p>
</div>
<div class="tab-pane fade" id="menu2">
<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 class="tab-pane fade" id="menu3">
<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>
<p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="53d1a3fb07f7448ad28241c08625f188" type="PenciLazyScript"></script>    </p>

Test it Now

Bootstrap 4 Tabs/ Pills

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>   <p>Basic horizontal menu:</p>   <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> </div>  </body> </html> 

Test it Now

Aligned Nav

By default nav is aligned to left.

For Center Align: Add the .justify-content-center class to center align the nav.

For Right Align: Add the .justify-content-end class to right-align the nav.

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> 

Test it Now

Vertical Nav

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

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>Vertical Nav Example</h2>   <p>Use the .flex-column class to create a vertical nav:</p>   <ul class="nav flex-column">     <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> 

Test it Now

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> 

Test it Now

Next TopicBootstrap Navbar

Bootstrap Tabs and Pills

Bootstrap Tabs and Pills

Bootstrap Menus

Bootstrap Tabs

Bootstrap Tabs with Dropdown Menu

Bootstrap Toggleable / Dynamic Tabs

Bootstrap Pills

Bootstrap Vertical Pills

Bootstrap Pills with Dropdown Menu

Bootstrap Toggleable Dynamic Pills

Bootstrap 4 Tabs/ Pills

Nav Menus

Example:

Aligned Nav

Example:

Vertical Nav

Example

Justified Tabs/ Pills

Example:

Add to cart button in Bootstrap

Can I get a virus from Facebook or MySpace

You may also like