Pills

eCommerce pills

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


Basic example

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

          <!--Panel 1-->
          <div class="tab-pane fade in show active" id="panel11" 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="panel12" 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="panel13" 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="panel14" 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>

      

Pills justified

Add .nav-justified class to justify pills.



        <ul class="nav md-pills nav-justified pills-primary">
          <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 within a modal



        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginRegister">
          Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade show" id="modalLoginRegister" tabindex="-1" role="dialog" aria-modal="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">

                <!-- Pills -->
                <ul class="nav md-pills nav-justified pills-primary">
                  <li class="nav-item">
                    <a class="nav-link border border-primary border-rounded active show" data-toggle="tab"
                      href="#modalLoginRegister-login" role="tab" aria-selected="true">Login</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link border border-primary border-rounded" data-toggle="tab"
                      href="#modalLoginRegister-register" role="tab" aria-selected="false">Register</a>
                  </li>
                </ul>
                <!-- Pills -->

                <!-- Content -->
                <div class="tab-content">

                  <!-- First panel -->
                  <div class="tab-pane fade in show active" id="modalLoginRegister-login" role="tabpanel">

                    <!-- Login form -->
                    <form id="formLoginRegister-login" class="pt-2" action="login" method="post">

                      <div class="md-form md-outline">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="formLoginRegister-email" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-email">Your email</label>
                      </div>
                      <div class="md-form md-outline">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="formLoginRegiser-password" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegiser-password">Your
                          password</label>
                      </div>

                      <div class="text-center mt-4 pt-3">
                        <button type="button" class="btn btn-outline-primary mr-1 mb-2 waves-effect waves-light">Forgot
                          password?</button>
                        <button type="button" class="btn btn-primary mb-2">Login</button>
                      </div>

                    </form>
                    <!-- Login form -->

                  </div>
                  <!-- First panel -->

                  <!-- Second panel -->
                  <div class="tab-pane fade" id="modalLoginRegister-register" role="tabpanel">

                    <!-- Register form -->
                    <form id="formLoginRegister-register" class="pt-2" action="register" method="post">

                      <div class="md-form md-outline">
                        <i class="fas fa-user prefix"></i>
                        <input type="text" id="formLoginRegister-name" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-name">Your name</label>
                      </div>
                      <div class="md-form md-outline">
                        <i class="fas fa-pencil-alt prefix"></i>
                        <input type="text" id="formLoginRegister-username" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-username">Your
                          username</label>
                      </div>
                      <div class="md-form md-outline">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="formLoginRegister-email-example" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-email-example">Your
                          email</label>
                      </div>
                      <div class="md-form md-outline">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="formLoginRegister-password-example" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-password-example">Your
                          password</label>
                      </div>
                      <div class="md-form md-outline">
                        <i class="fas fa-key prefix"></i>
                        <input type="password" id="formLoginRegister-password-repeat" class="form-control">
                        <label data-error="wrong" data-success="right" for="formLoginRegister-password-repeat">Repeat
                          password</label>
                      </div>

                      <div class="form-check mt-4 mb-3 pl-0 text-left">
                        <input type="checkbox" class="form-check-input filled-in" id="formLoginRegister-newsletter"
                          name="newsletter">
                        <label class="form-check-label small grey-text" for="formLoginRegister-newsletter">
                          I agree to sign up for account notifications and newsletter
                        </label>
                      </div>

                      <div class="text-center">
                        <p class="small grey-text mb-4">Lorem ipsum dolor sit amet <a target="_blank" href="#!">Privacy
                            Policy</a>.</p>
                        <button type="button" class="btn btn-primary my-2">Sign up</button>
                      </div>

                    </form>
                    <!-- Register form -->

                  </div>
                  <!-- Second panel -->

                </div>
                <!-- Content -->

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary waves-effect waves-light"
                  data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal -->