1 Example(s) of Bootstrap Tab


Description :

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


Bootstrap Tab Example - 1
<!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