Bootstrap Tabs

Please follow the following class to add bootstrap tabs in your website.

Tabs

This is only styling but not clickable tab. You will find clickable tab at the end of this post.

Code Structure
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
</div>

Tabs with Dropdown

This is only styling but not clickable tab. You will find clickable tab at the end of this post.

Code Structure
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab 1</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
</div>

Centered Tabs

This is only styling but not clickable tab. You will find clickable tab at the end of this post.

Code Structure
<div class="container">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
</div>

Dynamic Tab

Code Structure
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            <p>1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div id="tab2" class="tab-pane fade">
            <p>2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div id="tab3" class="tab-pane fade">
            <p>3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>

Share this

Related Posts