All for Joomla All for Webmasters

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 classto <ul> to create a horizontal menu.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Inline List</h3>
  12.   <ul class=“list-inline”>
  13.     <li><a href=“#”>Home</a></li>
  14.     <li><a href=“#”>Menu 1</a></li>
  15.     <li><a href=“#”>Menu 2</a></li>
  16.     <li><a href=“#”>Menu 3</a></li>
  17.   </ul>
  18. </div>
  19. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  20. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  21. </body>
  22. </html>

Bootstrap Tabs

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

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

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Tabs</h3>
  12.   <ul class=“nav nav-tabs”>
  13.     <li class=“active”><a href=“#”>Home</a></li>
  14.     <li><a href=“#”>Menu 1</a></li>
  15.     <li><a href=“#”>Menu 2</a></li>
  16.     <li><a href=“#”>Menu 3</a></li>
  17.   </ul>
  18.   <br>
  19. </div>
  20. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  21. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  22. </body>
  23. </html>

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Tabs With Dropdown Menu</h3>
  12.   <ul class=“nav nav-tabs”>
  13.     <li class=“active”><a href=“#”>Home</a></li>
  14.     <li class=“dropdown”>
  15.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  16.       <ul class=“dropdown-menu”>
  17.         <li><a href=“#”>Submenu 1-1</a></li>
  18.         <li><a href=“#”>Submenu 1-2</a></li>
  19.         <li><a href=“#”>Submenu 1-3</a></li>
  20.       </ul>
  21.     </li>
  22.     <li><a href=“#”>Menu 2</a></li>
  23.     <li><a href=“#”>Menu 3</a></li>
  24.   </ul>
  25. </div>
  26. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  27. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  28. </body>
  29. </html>

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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Dynamic Tabs</h2>
  12.   <ul class=“nav nav-tabs”>
  13.     <li class=“active”><a data-toggle=“tab” href=“#home”>Home</a></li>
  14.     <li><a data-toggle=“tab” href=“#menu1”>Menu 1</a></li>
  15.     <li><a data-toggle=“tab” href=“#menu2”>Menu 2</a></li>
  16.     <li><a data-toggle=“tab” href=“#menu3”>Menu 3</a></li>
  17.   </ul>
  18.   <div class=“tab-content”>
  19.     <div id=“home” class=“tab-pane fade in active”>
  20.       <h3>HOME</h3>
  21.       <p>A markup language is a programming language that is used make text more
  22.            interactive and dynamic. It can turn a text into images, tables, links etc.</p>
  23.     </div>
  24.     <div id=“menu1” class=“tab-pane fade”>
  25.       <h3>Menu 1</h3>
  26.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  27.     </div>
  28.     <div id=“menu2” class=“tab-pane fade”>
  29.       <h3>Menu 2</h3>
  30.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  31.      you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  32.     </div>
  33.     <div id=“menu3” class=“tab-pane fade”>
  34.       <h3>Menu 3</h3>
  35.       <p>The C Language is developed for creating system applications that direct
  36.       interacts to the hardware devices such as drivers, kernals etc.</p>
  37.     </div>
  38.   </div>
  39. </div>
  40. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  41. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  42. </body>
  43. </html>

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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Pills</h3>
  12.   <ul class=“nav nav-pills”>
  13.     <li class=“active”><a href=“#”>Home</a></li>
  14.     <li><a href=“#”>Menu 1</a></li>
  15.     <li><a href=“#”>Menu 2</a></li>
  16.     <li><a href=“#”>Menu 3</a></li>
  17.   </ul>
  18. </div>
  19. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  20. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  21. </body>
  22. </html>

Bootstrap Vertical Pills

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

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Vertical Pills</h3>
  12.   <ul class=“nav nav-pills nav-stacked”>
  13.     <li class=“active”><a href=“#”>Home</a></li>
  14.     <li><a href=“#”>Menu 1</a></li>
  15.     <li><a href=“#”>Menu 2</a></li>
  16.     <li><a href=“#”>Menu 3</a></li>
  17.   </ul>
  18. </div>
  19. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  20. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  21. </body>
  22. </html>

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h3>Pills With Dropdown Menu</h3>
  12.   <ul class=“nav nav-pills nav-stacked”>
  13.     <li class=“active”><a href=“#”>Home</a></li>
  14.     <li class=“dropdown”>
  15.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  16.       <ul class=“dropdown-menu”>
  17.         <li><a href=“#”>Submenu 1-1</a></li>
  18.         <li><a href=“#”>Submenu 1-2</a></li>
  19.         <li><a href=“#”>Submenu 1-3</a></li>
  20.       </ul>
  21.     </li>
  22.     <li><a href=“#”>Menu 2</a></li>
  23.     <li><a href=“#”>Menu 3</a></li>
  24.   </ul>
  25. </div>
  26. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  27. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  28. </body>
  29. </html>

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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Dynamic Pills</h2>
  12.   <ul class=“nav nav-pills”>
  13.     <li class=“active”><a data-toggle=“pill” href=“#home”>Home</a></li>
  14.     <li><a data-toggle=“pill” href=“#menu1”>Menu 1</a></li>
  15.     <li><a data-toggle=“pill” href=“#menu2”>Menu 2</a></li>
  16.     <li><a data-toggle=“pill” href=“#menu3”>Menu 3</a></li>
  17.   </ul>
  18.   <div class=“tab-content”>
  19.     <div id=“home” class=“tab-pane fade in active”>
  20.       <h3>HOME</h3>
  21.       <p>A markup language is a programming language that is used make text more interactive and
  22.         dynamic. It can turn a text into images, tables, links etc.</p>
  23.     </div>
  24.     <div id=“menu1” class=“tab-pane fade”>
  25.       <h3>Menu 1</h3>
  26.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  27.     </div>
  28.     <div id=“menu2” class=“tab-pane fade”>
  29.       <h3>Menu 2</h3>
  30.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  31.       you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  32.     </div>
  33.     <div id=“menu3” class=“tab-pane fade”>
  34.       <h3>Menu 3</h3>
  35.       <p>The C Language is developed for creating system applications that direct
  36.        interacts to the hardware devices such as drivers, kernals etc.</p>
  37.     </div>
  38.   </div>
  39. </div>
  40. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  41. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  42. </body>
  43. </html>
PinIt
submit to reddit

Leave a Reply

Top