a blog for those who code

Saturday 11 July 2015

Enhance Data Display using Tabs in Bootstrap

In this post we are going to learn about enhancing data display using tabs in Bootstrap. In our previous posts we have seen that how using a simple navbar, our navigation enhanced on a single page. Tab allow you to display data in different pages with tab title on it. Tabs are perfect when you have a lot of data to display. Tabs restrict user's ability to scroll.

As we have already seen in the previous posts that bootstrap gives you a lot of different ways that you can display out data for example by using columns etc. Now if we want our large chunk of data to shrink down we can use tabs , carousel etc. In this post we will be seeing how tabs help us to enhance data display in Bootstrap.

In order to create the tab section, you need to create an un-ordered list of links, similar to the list of links displayed in navbar. You need nav and nav-tabs classes and have to set us the role as tablist.

<ul class="nav nav-tabs" role="tablist">
//tab links

The tab links inside the unordered list needs role="tab" and data-toggle="tab" set on them. The href attribute in the tab links should point to the ID of the container of the data content.

<li class="active"><a href="#first" role="tab" data-toggle="tab">First</a></li
<li><a href="#second" role="tab" data-toggle="tab">Second</a></li>

The tab content should be placed below the tabs, and inside of div element having tab-content class.

<div class="tab-content">

Now the tabs should be inside the div elements having the class tab-pane.  You can aslo add active class on the tab which you want to display. To enable animation you can even ass fade class, and for the first tab instead of only fade you will need fade in.

<div class="active tab-pane fade" id="first">

Tab Example :

<div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#first" role="tab" data-toggle="tab">First </a></li>
<li><a href="#second" role="tab" data-toggle="tab">Second </a></li>
<li><a href="#third" role="tab" data-toggle="tab">Third </a></li>
<li><a href="#fourth" role="tab" data-toggle="tab">Fourth </a></li>
    <div class="tab-content">
        <div class="active tab-pane fade in" id="first">
    <h2>First Tab<h2>
    <div>This is my first tab</div>
<div class="tab-pane fade" id="second">
    <h2>Second Tab<h2>
    <div>This is my second tab</div>
<div class="tab-pane fade" id="third">
    <h2>Third Tab<h2>
    <div>This is my third tab</div>
<div class="tab-pane fade" id="fourth">
    <h2>Fourth Tab<h2>
    <div>This is my fourth tab</div>

Result :
Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment