Adding tabbed panels to Bootstrap – No jQuery

print
A great little piece of functionality built into Bootstrap is the ability to clear up some screen space using panels cascaded behind each other in tabs.  The best part is, it’s super easy to implement.

Here’s the code:

<ul id="tabs" class="nav nav-tabs" data-tabs="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>
    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="tab1">
        <h1>Tab 1</h1>
    </div>
    <div class="tab-pane" id="tab2">
        <h1>Tab 2</h1>
    </div>
    <div class="tab-pane" id="tab3">
        <h1>Tab 3</h1>
    </div>
    <div class="tab-pane" id="tab4">
        <h1>Tab 4</h1>
    </div>
    <div class="tab-pane" id="tab5">
        <h1>Tab 5</h1>
    </div>
</div>

The above code will leave you something looking like this:

bootstrap-tab-loader

Feel free to use, copy and modify this code as you need to.

Share this post:
Related Posts
Really easy registration form with JavaScript validation for Bootstrap
php-banner
PHP ternary operators and how to use them

Leave a Comment