Pills

Bootstrap Pills

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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.

Show code Edit in sandbox

HTML

        
            

            <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

Active
Link
Link
Help

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.

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

        
            

        <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

Show code Edit in sandbox

HTML

        
            

        <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

Blogger
Designer
Photographer
Model

Show code Edit in sandbox

HTML

        
            

        <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

Active
Link 1
Link 2
Link 3

Active
Link 1
Link 2
Link 3

Active
Link 1
Link 2
Link 3

Active
Link 1
Link 2
Link 3

Active
Link 1
Link 2
Link 3

Active
Link 1
Link 2
Link 3

Show code Edit in sandbox

HTML

        
            

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

USA
Mexico
Poland
Brazil

San Francisco
Tijuana
Cracow
Rio de Janeiro

Show code Edit in sandbox

HTML

        
            

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

Fashion
Lifestyle
Beauty
Shop

About
Features
Pricing

Show code Edit in sandbox

HTML

        
            

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

Fashion
Lifestyle
Beauty
Shop

Madrid
Bari
Warsaw
Paris

Features
Pricing
Gadgets
Technology

Show code Edit in sandbox

HTML

        
            

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

Pills within a modal MDB Pro component

Launch Modal LogIn/Register

Show code Edit in sandbox

HTML

        
            

        <!--Modal: Login / Register Form-->
        <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <!--Modal: Login & Register tabs-->
          <div class="modal-dialog cascading-modal" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Modal cascading tabs-->
              <div class="modal-c-tabs">

                <!-- Nav tabs -->
                <ul class="nav md-pills nav-justified pills-primary mt-4 mx-4" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab"><i class="fas fa-user mr-1"></i>
                      Login</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel2" role="tab"><i class="fas fa-user-plus mr-1"></i>
                      Register</a>
                  </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content pt-3">
                  <!--Panel 1-->
                  <div class="tab-pane fade in show active" id="panel1" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body mb-1">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="text" id="form11" class="form-control form-control-sm">
                        <label for="form11">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form12" class="form-control form-control-sm">
                        <label for="form12">Your password</label>
                      </div>
                      <div class="text-center mt-2">
                        <button class="btn btn-primary">Log in <i class="fas fa-sign-in ml-1"></i></button>
                      </div>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer display-footer">
                      <div class="options text-center text-md-right mt-1">
                        <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                        <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-primary waves-effects ml-auto" data-dismiss="modal">Close</button>
                    </div>

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

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

                    <!--Body-->
                    <div class="modal-body">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="text" id="form13" class="form-control form-control-sm">
                        <label for="form13">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form14" class="form-control form-control-sm">
                        <label for="form14">Your password</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form15" class="form-control form-control-sm">
                        <label for="form15">Repeat password</label>
                      </div>

                      <div class="text-center form-sm mt-2">
                        <button class="btn btn-primary">Sign up <i class="fas fa-sign-in ml-1"></i></button>
                      </div>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-right">
                        <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-primary waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                  <!--/.Panel 2-->
                </div>

              </div>
            </div>
            <!--/.Content-->
          </div>
          <!--/Modal: Login & Register tabs-->
        </div>
        <!--Modal: Login / Register Form-->

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

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

            <div class="text-center">
              <a href="" class="btn btn-default btn-rounded my-4" data-toggle="modal" data-target="#modalLRForm">Launch
                Modal LogIn/Register <i class="fas fa-eye ml-1"></i></a>
            </div>

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

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