Bootstrap Tab

 

.nav nav-tabs class is used to make the navigation bar of the tabs and .tab-content class is used to give information about the respective tab selected.

 
 
 
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs"> <ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#quick-actions" role="tab" data-toggle="tab" aria-controls="quick-actions" aria-expanded="true">Quick Actions</a></li> <li role="presentation" class=""><a href="#about" role="tab" data-toggle="tab" aria-controls="about" aria-expanded="false">About</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="quick-actions"> Hence it is that is almost a definition of a gentleman to say he is one who never inflicts pain. This description is both refined and, as far as it goes, accurate. He is mainly occupied in merely removing the obstacles which hinder the free and unembarrassed action of those about him; and he concurs with their movements rather than takes the initiative himself. His benefits may be considered a parallel to what are called comforts or conveniences in arrangements of a personal nature, like an easy chair or a good fire, which do their part in dispelling cold and fatigue, though nature provides both means of rest and animal heat without them. - J.E. Newman. </div> <div class="tab-pane" id="about"><p>Welcome to LearnKode , a code learning website.</p> </div> </div> </div> </body> </html>
Output