Tabs

Tabs use default Bootstrap tab markup with a new fresh style. For more information about it, please read documentation here:

Bootstrap Tab Documentation

Basic Markup

Here is a basic html of tabs:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-1" data-toggle="tab">Home</a></li>
    <li><a href="#tab-2" data-toggle="tab">Profile</a></li>
    <li><a href="#tab-3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="tab-1">
        <p class="light">Home Tab</p>
    </div>
    <div class="tab-pane fade" id="tab-2">
        <p>Profil Tab</p>
    </div>
    <div class="tab-pane fade" id="tab-3">
        <p>Message Tab</p>                                            
    </div>
</div>

Tab Navigation Orientation

By default, tab navigation is on top. You can put navigation on the left or on the right side of your content if you prefer.

To do that, wrap your tabs inside a div with tab_left or tab_right class. For example, if we take last example:

<div class="tab_left">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1" data-toggle="tab">Home</a></li>
        <li><a href="#tab-2" data-toggle="tab">Profile</a></li>
        <li><a href="#tab-3" data-toggle="tab">Message</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="tab-1">
            <p class="light">Home Tab</p>
        </div>
        <div class="tab-pane fade" id="tab-2">
            <p>Profil Tab</p>
        </div>
        <div class="tab-pane fade" id="tab-3">
            <p>Message Tab</p>                                            
        </div>
    </div>
</div>

Tab Line Colors

By default, current tab and hover tab have a dark bottom line. You customize it with other colors: primary, blue, red, gree and yellow.

Just add nav-primary (or nav-blue, nav-red, etc) class to nav-tabs to change his color:

<ul class="nav nav-tabs nav-primary">
    <li class="active"><a href="#tab-1" data-toggle="tab">Home</a></li>
    <li><a href="#tab-2" data-toggle="tab">Profile</a></li>
    <li><a href="#tab-3" data-toggle="tab">Message</a></li>
</ul>