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
PHP function to match worldwide VAT numbers
Bootstrap modal background doesn’t disappear when modal closes

Leave a Comment