Bootstrap Pills

In order to add bootstrap pills, please follow the following steps:

Pills

This is only styling but not clickable pills. You will find clickable pills at the end.

Code Structure
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</div>

Vertical Pills

This is only styling but not clickable pills. You will find clickable pills at the end.

Code Structure
<div class="container">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</div>

Pills with Dropdown

This is only styling but not clickable pills. You will find clickable pills at the end.

Code Structure
<div class="container">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Menu 1</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</div>

Centered Pills

This is only styling but not clickable pills. You will find clickable pills at the end.

Code Structure
<div class="container">
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</div>

Dynamic Pills

Code Structure
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#menu1" data-toggle="pill">Menu 1</a></li>
        <li><a href="#menu2" data-toggle="pill">Menu 2</a></li>
        <li><a href="#menu3" data-toggle="pill">Menu 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="menu1" class="tab-pane fade in active">
            <p>1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <p>2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <p>3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>

Share this

Related Posts