Sign in


Sign up


Bootstrap Pills

Bootstrap pills are simple navigation components that expedite browsing through various options in the layout.

They allow you to fit a lot of information in single space.

See the following Bootstrap pills examples:


Basic pills MDB Pro component

                
<ul class="nav md-pills pills-primary">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel60" role="tab">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel59" role="tab">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel58" role="tab">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel57" role="tab">Link 3</a>
    </li>
</ul>
                
            

Pills justified MDB Pro component

                
<ul class="nav md-pills nav-justified pills-pink">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel56" role="tab">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel55" role="tab">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel54" role="tab">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel53" role="tab">Link 3</a>
    </li>
</ul>
                
            

Pills with dropdown MDB Pro component

                
.pills-success .nav-item .dropdown-toggle.nav-link:focus {
    background-color: #00C851;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
                
            
                
<ul class="nav md-pills nav-justified pills-success">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel52" role="tab">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu dropdown-success">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel51" role="tab">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel50" role="tab">Link 2</a>
    </li>
</ul>
                
            

Gradient pills MDB Pro component

                
.pills-peach-gradient .nav-item .nav-link.active {
    background: linear-gradient(40deg, #FFD86F, #FC6262);
}
.pills-blue-gradient .nav-item .nav-link.active {
    background: linear-gradient(40deg, #45cafc, #303f9f);
}
.pills-purple-gradient .nav-item .nav-link.active {
    background: linear-gradient(40deg, #ff6ec4, #7873f5);
}
.pills-aqua-gradient .nav-item .nav-link.active {
    background: linear-gradient(40deg, #2096ff, #05ffa3);
}
                
            
                
<ul class="nav md-pills nav-justified pills-peach-gradient">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel40" role="tab">Blogger</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel41" role="tab">Designer</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel42" role="tab">Photographer</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel43" role="tab">Model</a>
    </li>
</ul>
                
            

Rounded pills MDB Pro component

                
.pills-rounded .nav-item .nav-link {
    border-radius: 10em;
}
.pills-light-purple .nav-item .nav-link.active {
    background-color: #ba68c8;
}

.pills-outline-red .nav-item .nav-link {
    border: 2px solid #fff;
    color: #666;
    background-color: transparent;
}
.pills-outline-red .nav-item .nav-link:hover {
    border: 2px solid #eee;
}
.pills-outline-red .nav-item .nav-link.active {
    border: 2px solid #f44336;
    color: #f44336;
}
.pills-outline-red .nav-item .nav-link.active:hover {
    border: 2px solid #f44336;
    color: #f44336;
}

.pills-outline-green .nav-item .nav-link {
    border: 2px solid #fff;
    color: #666;
    background-color: transparent;
}
.pills-outline-green .nav-item .nav-link:hover {
    border: 2px solid #eee;
}
.pills-outline-green .nav-item .nav-link.active {
    border: 2px solid #4caf50;
    color: #4caf50;
}
.pills-outline-green .nav-item .nav-link.active:hover {
    border: 2px solid #4caf50;
    color: #4caf50;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">
    
        <ul class="nav md-pills nav-justified pills-deep-purple pills-rounded">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel61" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel62" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel63" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel64" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">

        <ul class="nav md-pills nav-justified pills-light-purple pills-rounded">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel65" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel66" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel67" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel68" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">
    
        <ul class="nav md-pills nav-justified pills-peach-gradient pills-rounded">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel69" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel70" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel71" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel72" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">

        <ul class="nav md-pills nav-justified pills-aqua-gradient pills-rounded">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel73" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel74" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel75" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel76" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">
    
        <ul class="nav md-pills nav-justified pills-rounded pills-outline-red">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel77" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel78" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel79" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel80" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-10 col-lg-8 col-xl-6 mb-r">

        <ul class="nav md-pills nav-justified pills-rounded pills-outline-green">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel81" role="tab">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel82" role="tab">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel83" role="tab">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel84" role="tab">Link 3</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Pills with icons MDB Pro component

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 mb-r">
    
        <ul class="nav md-pills nav-justified pills-info">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel85" role="tab"><i class="fa fa-android mr-1" aria-hidden="true"></i> USA</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel86" role="tab"><i class="fa fa-leaf mr-1" aria-hidden="true"></i> Mexico</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel87" role="tab"><i class="fa fa-heart mr-1" aria-hidden="true"></i> Poland</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel88" role="tab"><i class="fa fa-soccer-ball-o mr-1" aria-hidden="true"></i> Brazil</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12">
    
        <ul class="nav md-pills nav-justified pills-rounded pills-outline-red">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel89" role="tab">San Francisco <i class="fa fa-smile-o ml-1" aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel90" role="tab">Tijuana <i class="fa fa-users ml-1" aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel91" role="tab">Cracow <i class="fa fa-thumbs-up ml-1" aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel92" role="tab">Rio de Janeiro <i class="fa fa-coffee ml-1" aria-hidden="true"></i></a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Pills with content MDB Pro component

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 col-lg-8 col-xl-6">

        <ul class="nav md-pills nav-justified pills-rounded pills-purple-gradient">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel100" role="tab">Fashion</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel101" role="tab">Lifestyle</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel102" role="tab">Beauty</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel103" role="tab">Shop</a>
            </li>
        </ul>

        <!-- Tab panels -->
        <div class="tab-content">

            <!--Panel 1-->
            <div class="tab-pane fade in show active" id="panel100" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 1-->

            <!--Panel 2-->
            <div class="tab-pane fade" id="panel101" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 2-->

            <!--Panel 3-->
            <div class="tab-pane fade" id="panel102" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 3-->

            <!--Panel 4-->
            <div class="tab-pane fade" id="panel103" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 4-->

        </div>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 col-lg-8 col-xl-6">

        
        <ul class="nav md-pills nav-justified pills-warning mb-4">
            <li class="nav-item pl-0">
                <a class="nav-link active " data-toggle="tab" href="#panel104" role="tab">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel105" role="tab">Features</a>
            </li>
            <li class="nav-item pr-0">
                <a class="nav-link" data-toggle="tab" href="#panel106" role="tab">Pricing</a>
            </li>
        </ul>
        <!-- Tab panels -->
        <div class="tab-content card">
            <!--Panel 1-->
            <div class="tab-pane fade in show active" id="panel104" role="tabpanel">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
            </div>
            <!--/.Panel 1-->
            <!--Panel 2-->
            <div class="tab-pane fade" id="panel105" role="tabpanel">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
            </div>
            <!--/.Panel 2-->
            <!--Panel 3-->
            <div class="tab-pane fade" id="panel106" role="tabpanel">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
            </div>
            <!--/.Panel 3-->
        </div>
                                   

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Pills colors animations MDB Pro component

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

                
.pills-blue-teal .nav-item .nav-link.active {
    background-color: #4fc3f7;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: #4fc3f7;}
    to {background-color: #009688;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: #4fc3f7;}
    to {background-color: #009688;}
}

.pills-outline-purple-anm .nav-item .nav-link.active {
    border: 2px solid #9c27b0;
    color: #9c27b0;
    background-color: transparent;
    -webkit-animation-name: outline; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: outline;
    animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes outline {
    from {border: 2px solid #9c27b0; color: #9c27b0;}
    to {border: 2px solid #f48fb1; color: #f48fb1;}
}

/* Standard syntax */
@keyframes outline {
    from {border: 2px solid #9c27b0; color: #9c27b0;}
    to {border: 2px solid #f48fb1; color: #f48fb1;}
}

.pills-orange-anm .nav-item .nav-link.active {
    background-color: #ffa000 ;
    -webkit-animation-name: orange; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: orange;
    animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes orange {
    from {background-color: #ffa000 ;}
    to {background-color: #f44336;}
}

/* Standard syntax */
@keyframes orange {
    from {background-color: #ffa000 ;}
    to {background-color: #f44336;}
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-10 col-xl-8 mb-r">

        <ul class="nav md-pills nav-justified pills-blue-teal">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel107" role="tab">Fashion</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel108" role="tab">Lifestyle</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel109" role="tab">Beauty</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel110" role="tab">Shop</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-10 col-xl-8 mb-r">

        <ul class="nav md-pills nav-justified pills-rounded pills-outline-purple-anm">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel111" role="tab">Madrid</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel112" role="tab">Bari</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel113" role="tab">Warsaw</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel114" role="tab">Paris</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-10 col-xl-8">

        <ul class="nav md-pills nav-justified pills-rounded pills-orange-anm">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel115" role="tab">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel116" role="tab">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel117" role="tab">Gadgets</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel118" role="tab">Technology</a>
            </li>
        </ul>

        <!-- Tab panels -->
        <div class="tab-content">

            <!--Panel 1-->
            <div class="tab-pane fade in show active" id="panel115" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 1-->

            <!--Panel 2-->
            <div class="tab-pane fade" id="panel116" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 2-->

            <!--Panel 3-->
            <div class="tab-pane fade" id="panel117" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 3-->

            <!--Panel 4-->
            <div class="tab-pane fade" id="panel118" role="tabpanel">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 4-->

        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->