Edit these docs

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.

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.

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>

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

HTML
CSS



        <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

HTML
CSS



        <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

HTML
CSS



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

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

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

HTML
CSS



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

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

Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

Community developed components & design projects
Technical support & community forum
CLI interface & free project hosting
Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!