Integrating Bootstrap Tabs Tutorial

Bootstrap is one of the top frameworks available on the web. Integrating it is relatively simple, but there might be some components that can cause troubles to novice web developer, meeting with bootstrap for the first time. One of these components, which I will be covering today, are tabs.

So, in this tutorial I will show you how to integrate bootstrap tabs, and add some custom content to it.

Tabs are generated using bootstrap.js plugin, so before we start, make sure you have included it, just after the jQuery library.

Let’s Get Started

Markup:

<div class="content col-md-6">

   <div role="tabpanel">

       	<!--Nav Tabs-->
       	<ul id="nested-tabs" class="nav nav-tabs" role="tablist">
       		<li role="presentation" class="active"><a href="#tab1" aria-controls="tab" role="tab" data-toggle="tab">tab 1</a></li>
       		<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
       		<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
       	</ul>	

       	<!--Tab Panels -->
       	<div id="panels" class="tab-content">

             <!-- Tab 1 Panel -->
             <!-- Tab 2 Panel -->
             <!-- Tab 3 Panel -->

        </div><!-- panels close -->	

    </div><!--tabpanel close-->	 

</div><!-- - content close - - -->

That’s how it looks, it ain’t that scary don’t worry.

Basicaly what you need to know here is that tab needs to be wrapped with content class, along with the col-md-6 Bootstrap class, you hould be familiar with by now.

Considering the tabs themselves they consists of two parts:

• Nav Tabs (the navigation part, that appears as clickable button – part of tab) and
• Tab Panels the content part which appears after you click the appropriate nav tab.

Both Nav Tabs and Tab Panles have to be wrapped with <div role="tabpanel"> a Bootstrap component attribute that makes this work.

Nav Tabs

Now speaking of the first part – Nav Tabs it has the following markup:

<ul id="nested-tabs" class="nav nav-tabs" role="tablist">
     <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab 1</a></li>
     <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
     <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
</ul>

What you need here is to follow given markup, and pay attention to two things: href attribute and aria-controls attribute. First one href attribute is a standard HTML link attribute. What you are doing here is pointing the link to the ID of your Tab Panel that holds the content connected to the tab. So, put the standard ID identifier # in front of the ID you assigned to your desired tab panel (it will be explained, don’t worry).

For aria-controls (Bootstrap component) you don’t need to put #, just enter the ID of the linked tab panel.

The rest of the code is pretty much generic just add role="presentation" attribute to the list element (<li>), and role="tab" and data-toggle="tab" attributes to the link <a> element.

 <li class="active"><a href="#tab1" data-toggle="tab" >tab 1</a></li>

Tab Panels

Tab panel markup is following:

<div role="tabpanel" class="tab-pane fade" id="tab2">
    <h3> -- Tab Heading -- </h3>
    <p> -- Tab Content -- </p>
</div><!-- tabpanel Close -->

That’s all you need for the proper Tab Panel to work. Assign role="tabpanel" attribute and tab-pane class to the wrapping div and set your title and content.

Also, there are few pre-defined options that can be added to the tab to enrich it:

Button/Buttons

<span class="cta-link">
     <a class="btn btn-success" href="#">Get it Now</a>
</span>

To add button, or buttons just append it/them to the content, after the p element:

<div role="tabpanel" class="tab-pane fade" id="tab2">
    <h3> -- Tab Heading -- </h3>
    <p> -- Tab Content -- </p>
    		  	-- Button --
</div><!-- tabpanel Close -->

Image

<div class="tab-col"> 
    <img src="images/small.png" class="img-responsive" alt="screen"/>
</div>

To add image to the content you need to use custom class tab-col which have to be assigned to both image and content div's

<div role="tabpanel" class="tab-pane fade in active" id="tab1">

                          <!-- first tab image -->                      
                        <div class="tab-col"> 
                          <img src="images/preview2.png" class="img-responsive" alt="screen"/>
                        </div>

                          <!-- first tab content -->
                        <div class="tab-col"> 
                           <h3> -- Some Tab Heading -- </h3> 
       					   <p> -- Some Tab Content -- </p>
                        </div>

</div><!-- first tab-panel close -->