Prev Page
Next Page  
Bootstrap Tabs
The bootstrap tabs are used to separate content into different panes where each pane is viewable one at a time. Dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.

Bootstrap tabs are a great way to easily navigate to distinct content without having to scroll or switch web pages. 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tabs</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="row">
    
<ul class="nav nav-tabs">
   <li class="active"><a hre ="#">BOOTSTRAP</a></li>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JAVASCRIPT</a></li>
   <li><a href="#">PHP</a></li>
   <li><a href="#">JQUERY</a></li>
</ul>
   
</div>
 
</body>
</html>
Output :
Usage
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Toggleable / Dynamic Tabs

To make the tabs toggleable, 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.</div>

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tabs</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
    
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
            <li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">MORE TUTORIALS<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
                    <li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
                </ul>
            </li>
        </ul>
        <div class="tab-content">
            <div id="HTML5" class="tab-pane fade in active">
                <h3>HTML5</h3>
                <p>HTML5 (No space between "HTML" and "5")is a markup language 
                used for structuring and presenting content on the World Wide Web. 
                It is the fifth and current version of the HTML standard.</p>
 
		<p>It was published in 28 October 2014, W3C also published an HTML 
                5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
                Consortium (W3C) to improve the language with support for the latest 
                multimedia, while keeping it both easily readable by humans and 
                consistently understood by computers and devices such as web browsers. 
                HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
                Document Object Model (DOM) Level 2 HTML.</p>
            </div>
            <div id="CSS3" class="tab-pane fade">
                <h3>CSS3</h3>
                <p>The CSS was started to develop around 1998. And till 2009, it was 
                under development. The first working draft of CSS3 came in 19-01-2001. 
                but it was initially declared early in the June 1999. The main difference 
                between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
                Color.</p>
            </div>
            <div id="JAVASCRIPT" class="tab-pane fade">
                <h3>JAVASCRIPT</h3>
                <p>JavaScript is the programming language of the Web. Javascript Most commonly 
                used websites this is client-side script to interact with the user and make 
                dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
                are using JavaScript. JavaScript is part of the triad of technologies that all 
                Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
                content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
                of web pages, and JavaScript to specify the behavior of web pages.</p>
            </div>
            <div id="BOOTSTRAP" class="tab-pane fade">
                <h3>BOOTSTRAP</h3>
                <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
                developing responsive, mobile-first web sites. Bootstrap is faster and 
                easier web development.</p>
 
		<p>Bootstrap includes a responsive, mobile first fluid grid system that 
                appropriately scales up to 12 columns as the device or viewport size 
                increases. It includes predefined classes for easy layout options, as 
                well as powerful mixins for generating more semantic layouts.</p>
            </div>
        </div>
   
</div>
 
</body>
</html>
Output :
Toggleable / Dynamic Pills
The Bootstrap tab code applies to pills; only change the data-toggle attribute to data-toggle="pill"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tab Pills</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
      <ul class="nav nav-pills">
        <li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
        <li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
        <li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
        <li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
      </ul>
    <div class="tab-content">
        <div id="HTML5" class="tab-pane fade in active">
            <h3>HTML5</h3>
            <p>HTML5 (No space between "HTML" and "5")is a markup language 
            used for structuring and presenting content on the World Wide Web. 
            It is the fifth and current version of the HTML standard.</p>

    <p>It was published in 28 October 2014, W3C also published an HTML 
            5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
            Consortium (W3C) to improve the language with support for the latest 
            multimedia, while keeping it both easily readable by humans and 
            consistently understood by computers and devices such as web browsers. 
            HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
            Document Object Model (DOM) Level 2 HTML.</p>
        </div>
        <div id="CSS3" class="tab-pane fade">
            <h3>CSS3</h3>
            <p>The CSS was started to develop around 1998. And till 2009, it was 
            under development. The first working draft of CSS3 came in 19-01-2001. 
            but it was initially declared early in the June 1999. The main difference 
            between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
            Color.</p>
        </div>
        <div id="JAVASCRIPT" class="tab-pane fade">
            <h3>JAVASCRIPT</h3>
            <p>JavaScript is the programming language of the Web. Javascript Most commonly 
            used websites this is client-side script to interact with the user and make 
            dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
            are using JavaScript. JavaScript is part of the triad of technologies that all 
            Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
            content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
            of web pages, and JavaScript to specify the behavior of web pages.</p>
        </div>
        <div id="BOOTSTRAP" class="tab-pane fade">
            <h3>BOOTSTRAP</h3>
            <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
            developing responsive, mobile-first web sites. Bootstrap is faster and 
            easier web development.</p>

    <p>Bootstrap includes a responsive, mobile first fluid grid system that 
            appropriately scales up to 12 columns as the device or viewport size 
            increases. It includes predefined classes for easy layout options, as 
            well as powerful mixins for generating more semantic layouts.</p>
        </div>
    </div>
   
</div>
 
</body>
</html>
Output :
Bootstrap Vertical Tabs and Pills
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Verticla Tabs and Pills</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<h3>Vertical Tabs</h3>
<div class="row">
     
<div class="col-md-3">
<ul class="nav nav-tabs nav-stacked">
    <li class="active"><a data-toggle="tab" href="#HTML5">HTML5</a></li>
    <li><a data-toggle="tab" href="#CSS3">CSS3</a></li>
    <li><a data-toggle="tab" href="#JAVASCRIPT">JAVASCRIPT</a></li>
    <li><a data-toggle="tab" href="#BOOTSTRAP">BOOTSTRAP</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
    <div id="HTML5" class="tab-pane fade in active">
        <h3>HTML5</h3>
        <p>HTML5 (No space between "HTML" and "5")is a markup language 
        used for structuring and presenting content on the World Wide Web. 
        It is the fifth and current version of the HTML standard.</p>
    
       <p>It was published in 28 October 2014, W3C also published an HTML 
        5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
        Consortium (W3C) to improve the language with support for the latest 
        multimedia, while keeping it both easily readable by humans and 
        consistently understood by computers and devices such as web browsers. 
        HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
        Document Object Model (DOM) Level 2 HTML.</p>
    </div>
    <div id="CSS3" class="tab-pane fade">
        <h3>CSS3</h3>
        <p>The CSS was started to develop around 1998. And till 2009, it was 
        under development. The first working draft of CSS3 came in 19-01-2001. 
        but it was initially declared early in the June 1999. The main difference 
        between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
        Color.</p>
    </div>
    <div id="JAVASCRIPT" class="tab-pane fade">
        <h3>JAVASCRIPT</h3>
        <p>JavaScript is the programming language of the Web. Javascript Most commonly 
        used websites this is client-side script to interact with the user and make 
        dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
        are using JavaScript. JavaScript is part of the triad of technologies that all 
        Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
        content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
        of web pages, and JavaScript to specify the behavior of web pages.</p>
    </div>
    <div id="BOOTSTRAP" class="tab-pane fade">
        <h3>BOOTSTRAP</h3>
        <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
        developing responsive, mobile-first web sites. Bootstrap is faster and 
        easier web development.</p>
    
       <p>Bootstrap includes a responsive, mobile first fluid grid system that 
        appropriately scales up to 12 columns as the device or viewport size 
        increases. It includes predefined classes for easy layout options, as 
        well as powerful mixins for generating more semantic layouts.</p>
    </div>
</div>
</div>
      
  </div>
 
 <hr /><hr />
 
 <h3>Vertical Tab Pills</h3>
       
<div class="row">

<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="tab" href="#HTML5-2">HTML5</a></li>
    <li><a data-toggle="tab" href="#CSS3-2">CSS3</a></li>
    <li><a data-toggle="tab" href="#JAVASCRIPT-2">JAVASCRIPT</a></li>
    <li><a data-toggle="tab" href="#BOOTSTRAP-2">BOOTSTRAP</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
    <div id="HTML5-2" class="tab-pane fade in active">
        <h3>HTML5</h3>
        <p>HTML5 (No space between "HTML" and "5")is a markup language 
        used for structuring and presenting content on the World Wide Web. 
        It is the fifth and current version of the HTML standard.</p>
        
        <p>It was published in 28 October 2014, W3C also published an HTML 
        5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
        Consortium (W3C) to improve the language with support for the latest 
        multimedia, while keeping it both easily readable by humans and 
        consistently understood by computers and devices such as web browsers. 
        HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
        Document Object Model (DOM) Level 2 HTML.</p>
    </div>
    <div id="CSS3-2" class="tab-pane fade">
        <h3>CSS3</h3>
        <p>The CSS was started to develop around 1998. And till 2009, it was 
        under development. The first working draft of CSS3 came in 19-01-2001. 
        but it was initially declared early in the June 1999. The main difference 
        between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
        Color.</p>
    </div>
    <div id="JAVASCRIPT-2" class="tab-pane fade">
        <h3>JAVASCRIPT</h3>
        <p>JavaScript is the programming language of the Web. Javascript Most commonly 
        used websites this is client-side script to interact with the user and make 
        dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
        are using JavaScript. JavaScript is part of the triad of technologies that all 
        Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
        content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
        of web pages, and JavaScript to specify the behavior of web pages.</p>
    </div>
    <div id="BOOTSTRAP-2" class="tab-pane fade">
        <h3>BOOTSTRAP</h3>
        <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
        developing responsive, mobile-first web sites. Bootstrap is faster and 
        easier web development.</p>
    
       <p>Bootstrap includes a responsive, mobile first fluid grid system that 
        appropriately scales up to 12 columns as the device or viewport size 
        increases. It includes predefined classes for easy layout options, as 
        well as powerful mixins for generating more semantic layouts.</p>
    </div>
</div>
</div>
</div>
   
</div>
 
</body>
</html>
Output :
Events

When showing a new tab, the events fire in the following order:

1. hide.bs.tab - Current active tab

2. show.bs.tab - Shown tab

3. hidden.bs.tab - Previous active tab, the same one as for the hide.bs.tab event

4. shown.bs.tab - Newly active just-shown tab

Event Description Example
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
$('a[data-toggle = "tab"]').on('hide.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
$('a[data-toggle = "tab"]').on('hidden.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
  Prev Page
Next Page