Adding tabbed panels to Bootstrap – No jQuery

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>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="tab1">
        <h1>Tab 1</h1>
    <div class="tab-pane" id="tab2">
        <h1>Tab 2</h1>
    <div class="tab-pane" id="tab3">
        <h1>Tab 3</h1>
    <div class="tab-pane" id="tab4">
        <h1>Tab 4</h1>
    <div class="tab-pane" id="tab5">
        <h1>Tab 5</h1>

The above code will leave you something looking like this:


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

Share this post:
Related Posts
Stop jQuery ignoring the if/else conditions
Really easy registration form with JavaScript validation for Bootstrap

Leave a Comment