Tabs

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

Base tab

If you’re building our JavaScript from source, it requires util.js.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Baw denim you basicaly haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                                                        
<!-- Tab -->
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Some text here</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Some text here</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Some text here</div>
</div>
<!-- End of tab -->

To help fit your needs, this works with <ul>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <nav>, you shouldn’t add role="tablist" directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <div>) and wrap the <nav> around it.

                                                        
<!-- Tab -->
<nav>
    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Some text here</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Some text here</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Some text here</div>
</div>
<!-- End of tab -->

Navs

Round
                                                        
<!-- Tab -->
<div class="nav-wrapper">
    <ul class="nav nav-pills nav-fill rounded flex-column flex-md-row" id="tab-31" role="tablist">
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center active" id="tab-link-example-4" data-toggle="tab"
                href="#link-example-4" role="tab" aria-controls="link-example-4" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center" id="tab-link-example-5" data-toggle="tab" href="#link-example-5"
                role="tab" aria-controls="link-example-5" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center" id="tab-link-example-6" data-toggle="tab" href="#link-example-6"
                role="tab" aria-controls="link-example-6" aria-selected="false">Messages</a>
        </li>
    </ul>
</div>
<!-- End of Tab Nav -->
<!-- Tab Content -->
<div class="card">
    <div class="card-body p-0">
        <div class="tab-content" id="tabcontentexample-2">
            <div class="tab-pane fade show active" id="link-example-4" role="tabpanel"
                aria-labelledby="tab-link-example-4">
                <p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-5" role="tabpanel" aria-labelledby="tab-link-example-5">
                <p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-6" role="tabpanel" aria-labelledby="tab-link-example-6">
                <p> Booth exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
        </div>
    </div>
</div>
<!-- End of Tab -->
Icons
                                                        
<!-- Tab -->
<div class="nav-wrapper">
    <ul class="nav nav-pills nav-fill rounded flex-column flex-md-row mb-3" id="tab-32" role="tablist">
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center active" id="tab-link-example-7" data-toggle="tab"
                href="#link-example-7" role="tab" aria-controls="link-example-7" aria-selected="true"><i class="far fa-user-circle"></i>Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center" id="tab-link-example-8" data-toggle="tab" href="#link-example-8"
                role="tab" aria-controls="link-example-8" aria-selected="false"><i class="far fa-sun"></i>Settings</a>
        </li>
        <li class="nav-item">
            <a class="nav-link flex-sm-fill text-sm-center" id="tab-link-example-9" data-toggle="tab" href="#link-example-9"
                role="tab" aria-controls="link-example-9" aria-selected="false"><i class="fas fa-envelope-open-text"></i>Messages</a>
        </li>
    </ul>
</div>
<!-- End of Tab Nav -->
<!-- Tab Content -->
<div class="card">
    <div class="card-body p-0">
        <div class="tab-content" id="tabcontentexample-3">
            <div class="tab-pane fade show active" id="link-example-7" role="tabpanel"
                aria-labelledby="tab-link-example-7">
                <p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-8" role="tabpanel" aria-labelledby="tab-link-example-8">
                <p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-9" role="tabpanel" aria-labelledby="tab-link-example-9">
                <p> Booth exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
        </div>
    </div>
</div>
<!-- End of Tab -->
Circle
                                                        
<!-- Tab -->
<div class="nav-wrapper">
    <ul class="nav nav-pills nav-pill-circle flex-sm-row mb-3" id="tab-33" role="tablist">
        <li class="nav-item">
            <a class="nav-link text-sm-center active" id="tab-link-example-10" data-toggle="tab" href="#link-example-10" 
                role="tab" aria-controls="link-example-10" aria-selected="true">
                <span class="nav-link-icon d-block"><i class="far fa-user"></i></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-sm-center" id="tab-link-example-11" data-toggle="tab" href="#link-example-11"
                role="tab" aria-controls="link-example-11" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="far fa-sun"></i></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-sm-center" id="tab-link-example-12" data-toggle="tab" href="#link-example-12"
                role="tab" aria-controls="link-example-12" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="fas fa-envelope-open-text"></i></span>
            </a>
        </li>
    </ul>
</div>
<!-- End of Tab Nav -->
<!-- Tab Content -->
<div class="card">
    <div class="card-body p-0">
        <div class="tab-content" id="tabcontentexample-4">
            <div class="tab-pane fade show active" id="link-example-10" role="tabpanel"
                aria-labelledby="tab-link-example-10">
                <p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-11" role="tabpanel" aria-labelledby="tab-link-example-11">
                <p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-12" role="tabpanel" aria-labelledby="tab-link-example-12">
                <p> Booth exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
        </div>
    </div>
</div>
<!-- End of Tab -->
Color

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

                                                        
<!-- Tab -->
<div class="nav-wrapper">
    <ul class="nav nav-pills nav-pill-circle mb-3" id="tab-34" role="tablist">
        <li class="nav-item">
            <a class="nav-link text-sm-center active" id="tab-link-example-13" data-toggle="tab" href="#link-example-13" 
                role="tab" aria-controls="link-example-13" aria-selected="true">
                <span class="nav-link-icon icon-primary d-block"><i class="far fa-user"></i></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-sm-center" id="tab-link-example-14" data-toggle="tab" href="#link-example-14"
                role="tab" aria-controls="link-example-14" aria-selected="false">
                <span class="nav-link-icon icon-secondary d-block"><i class="far fa-sun"></i></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-sm-center" id="tab-link-example-15" data-toggle="tab" href="#link-example-15"
                role="tab" aria-controls="link-example-15" aria-selected="false">
                <span class="nav-link-icon icon-tertiary d-block"><i class="fas fa-envelope-open-text"></i></span>
            </a>
        </li>
    </ul>
</div>
<!-- End of Tab Nav -->
<!-- Tab Content -->
<div class="card">
    <div class="card-body p-0">
        <div class="tab-content" id="tabcontentexample-5">
            <div class="tab-pane fade show active" id="link-example-13" role="tabpanel"
                aria-labelledby="tab-link-example-13">
                <p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-14" role="tabpanel" aria-labelledby="tab-link-example-14">
                <p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
            <div class="tab-pane fade" id="link-example-15" role="tabpanel" aria-labelledby="tab-link-example-15">
                <p> Booth exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
            </div>
        </div>
    </div>
</div>
<!-- End of Tab -->

Vertical tabs

Default

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

                                                        
<!-- Vertical tab -->
<div class="row">
    <div class="col-3">
        <div class="nav flex-column navs vertical-tab" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <p class="lead">Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                        
            </div>
            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                <p class="lead">Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                        
            </div>
            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <p class="lead">Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                            
            </div>
        </div>
    </div>
</div>
<!-- End of vertical tab -->
Circle

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.

                                                        
<!-- Vertical tab -->
<div class="row">
    <div class="col-3">
        <div class="nav flex-column navs nav-pill-circle vertical-tab" id="v-pills-tab-1" role="tablist" aria-orientation="vertical">
            <a class="nav-link flex-sm-fill text-sm-center active" id="v-pills-profile-tab-1" data-toggle="pill" href="#v-pills-profile-1" role="tab" aria-controls="v-pills-profile-1" aria-selected="false">
                <span class="nav-link-icon icon-primary d-block"><i class="far fa-user"></i></span>
            </a>
            <a class="nav-link flex-sm-fill text-sm-center" id="v-pills-messages-tab-1" data-toggle="pill" href="#v-pills-messages-1" role="tab" aria-controls="v-pills-messages-1" aria-selected="false">
                <span class="nav-link-icon icon-secondary d-block"><i class="far fa-sun"></i></span>
            </a>
            <a class="nav-link" id="v-pills-settings-tab-1" data-toggle="pill" href="#v-pills-settings-1" role="tab" aria-controls="v-pills-settings-1" aria-selected="false">
                <span class="nav-link-icon icon-tertiary d-block"><i class="far fa-paper-plane"></i></span>
            </a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent-1">
            <div class="tab-pane fade show active" id="v-pills-profile-1" role="tabpanel" aria-labelledby="v-pills-profile-tab-1">
                <p class="lead">Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                        
            </div>
            <div class="tab-pane fade" id="v-pills-messages-1" role="tabpanel" aria-labelledby="v-pills-messages-tab-1">
                <p class="lead">Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                        
            </div>
            <div class="tab-pane fade" id="v-pills-settings-1" role="tabpanel" aria-labelledby="v-pills-settings-tab-1">
                <p class="lead">Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p>
                <p class="lead">Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>                            
            </div>
        </div>
    </div>
</div>
<!-- End of vertical tab -->
Using data attributes

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Use these data attributes on .nav-tabs or .navs.

                                    
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
    <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Via JavaScript

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

                                    
$('#myTab a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
})

You can activate individual tabs in several ways:

                                        
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab li:first-child a').tab('show'); // Select first tab
$('#myTab li:last-child a').tab('show'); // Select last tab
$('#myTab li:nth-child(3) a').tab('show'); // Select third tab
Methods

For more information, see the official Bootstrap documentation.