Post
Ask Question

Menu Tab In Bootstrap

Here, we are going to create menu tab using Bootstrap and HTML.

menu tab

Basically, many times we have a requirement to create different divs which can display different data under that particular div as shown in the above image. It can be done by a couple of different ways but I mostly prefer bootstrap as it is a bit easy to use and we have already predefined classes which can be grabbed easily and can be played around with.
 
So, here we are using HTML and Bootstrap only that can be put on any HTML page which will display the desired result. 
 
Steps

Create new HTML page.

Add a reference to the Bootstrap on the HTML page.

Put HTML code on the page of different div section. 
 
To make it easier I have provided complete code below which you can pick and put on your HTML page to test functionality. 
 
Code Section
 
First, put a reference to bootstrap and its CSS on-page and later on our HTML will be consuming those classes.
Compete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
  6.     <!-- Optional theme -->  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
  8.     <!-- Latest compiled and minified JavaScript -->  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
  10.     <title>Bootstrap Menu Tab</title>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Dynamic Tabs</h2>  
  16.         <ul class="nav nav-tabs">  
  17.             <li class="active"><a data-toggle="tab" href="#home">Home</a></li>  
  18.             <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>  
  19.             <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>  
  20.             <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>  
  21.         </ul>  
  22.         <div class="tab-content">  
  23.             <div id="home" class="tab-pane fade in active">  
  24.                 <h3>HOME</h3>  
  25.                 <p>Home Page Contents</p>  
  26.             </div>  
  27.             <div id="menu1" class="tab-pane fade">  
  28.                 <h3>Menu 1</h3>  
  29.                 <p>Menu 1 Contents</p>  
  30.             </div>  
  31.             <div id="menu2" class="tab-pane fade">  
  32.                 <h3>Menu 2</h3>  
  33.                 <p>Menu 2 Contents</p>  
  34.             </div>  
  35.             <div id="menu3" class="tab-pane fade">  
  36.                 <h3>Menu 3</h3>  
  37.                 <p>Menu 3 Contents</p>  
  38.             </div>  
  39.         </div>  
  40.     </div>  
  41. </body>  
  42.   
  43. </html>  
G
M
T
 
Text-to-speech function is limited to 200 characters