Bootstrap Tabs Example

Bootstrap Dynamic Tabs

HOME

A simple example of Bootstrap dynamic tabs.

Instruction

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.

Example:

<ul class="nav nav-tabs">
  <li>
    <a data-toggle="tab" href="#tab1">Link to tab1</a>
  </li>
  <li>
    <a data-toggle="tab" href="#tab2">Link to tab2</a>
  </li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade">
    This is the first tab.
  </div>
  <div id="tab2" class="tab-pane fade">
    This is the second tab.
  </div>
</div>

Comments

Tom Cruise Posted on April 19, 2017

The post is very useful. Thanks for your contribution!

Igor Makarsky Posted on April 20, 2017

You're welcome!

Jim Carrey Posted on April 19, 2017

Dude, you SUCK! I can do better!

Skipper Posted on April 21, 2017

Hey Jim! I'm your fan!

Author

Igor Makarsky

Belarusian. Full-stack PHP developer. Sololearn user.

My Sololearn profile

My Blog with Bootstrap tabs