Pills

Bootstrap Pills

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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:


Default pills

The default styling for Bootstrap Pills components

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
        
            

            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                  aria-controls="pills-home" aria-selected="true">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
                  aria-controls="pills-profile" aria-selected="false">Profile</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab"
                  aria-controls="pills-contact" aria-selected="false">Contact</a>
              </li>
            </ul>
            <div class="tab-content pt-2 pl-1" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Consequat
                occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat
                velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo
                anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing
                minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt
                nostrud.</div>
              <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Ad
                pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt
                amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id
                incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis
                deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</div>
              <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Est
                quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex.
                Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim
                exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit
                aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia
                elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt
                tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim
                reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt
                ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur
                mollit voluptate voluptate consequat non.</div>
            </div>

          
        
    

Material pills MDB Pro component

Material Design styling for Bootstrap Pills 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.

        
            
            <ul class="nav md-pills pills-secondary">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel11" role="tab">Active</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel12" role="tab">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel13" role="tab">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel14" role="tab">Help</a>
              </li>
            </ul>

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

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

                <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="panel12" role="tabpanel">
                <br>

                <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="panel13" role="tabpanel">
                <br>

                <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="panel14" role="tabpanel">
                <br>

                <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>
          
        
    

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

        
            

        <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>

      
        
    
        
            

        .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);
        }

      
        
    

Gradient pills MDB Pro component

        
            

        <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>

      
        
    
        
            

        .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);
        }

      
        
    

Rounded pills MDB Pro component

        
            

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

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

            <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">

            <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">

            <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">

            <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">

            <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">

            <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-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;
        }

      
        
    

Pills with icons MDB Pro component

        
            

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

          <!-- Grid column -->
          <div class="col-md-12">

            <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="fab 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="fas 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="fas 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="far fa-futbol 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="far fa-grin 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="fas 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="fas 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="fas 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 -->

      
        
    

Color 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.

        
            

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

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

            <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="#panel1010 col-xl-8" 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">

            <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 -->

      
        
    
        
            

        .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;}
        }