<div class="container my-4">

  <p>

    <strong>Pills are quasi-navigation components which can highly improve website clarity and increase user experience:</strong>

  </p>

​

  <p>

    Detailed documentation and more examples you can find in our

    <a

       href="https://mdbootstrap.com/docs/standard/navigation/pills/"

       target="_blank"

       ><strong>Bootstrap Pills Docs</strong></a

      >

  </p>

​

  <hr />

​

  <p class="font-weight-bold">Basic example</p>

​

  <p>

    Basic pills are divided into 2 main sections -

    <strong>Pills navs</strong> (containing <code>nav-item</code>s) and

    <strong>Pills content</strong> (containing <code>tab-pane</code>s).

  </p>

​

  <!-- Copy this code to have a working example -->

  <section class="border p-4 mb-4">

    <!-- Pills navs -->

    <ul class="nav nav-pills mb-3" id="ex1" role="tablist">

      <li class="nav-item" role="presentation">

        <a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="pill" href="#ex1-pills-1" role="tab" aria-controls="ex1-pills-1" aria-selected="true">Tab 1</a>

      </li>

      <li class="nav-item" role="presentation">

        <a class="nav-link" id="ex1-tab-2" data-mdb-toggle="pill" href="#ex1-pills-2" role="tab" aria-controls="ex1-pills-2" aria-selected="false">Tab 2</a>

      </li>

      <li class="nav-item" role="presentation">

        <a class="nav-link" id="ex1-tab-3" data-mdb-toggle="pill" href="#ex1-pills-3" role="tab" aria-controls="ex1-pills-3" aria-selected="false">Tab 3</a>

      </li>

    </ul>

    <!-- Pills navs -->

​

    <!-- Pills content -->

    <div class="tab-content" id="ex1-content">

      <div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">

        Tab 1 content

      </div>

      <div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">

        Tab 2 content

      </div>

      <div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">

        Tab 3 content

      </div>

    </div>

    <!-- Pills content -->

  </section>

  <!--/ Copy this code to have a working example -->

​

  <p class="note note-warning my-3">

    <strong>Note:</strong> To see more examples and sourcecodes check 

    <a href="https://mdbootstrap.com/docs/standard/navigation/pills/" target="_blank" >

      <strong>Bootstrap Pills Docs</strong>

    </a>

  </p>

​

  <p class="font-weight-bold mt-3">Fill example</p>

​

  <p>

    To proportionately fill all available space with your <code>.nav-item</code>s, use

    <code>.nav-fill</code>. Notice that all horizontal space is occupied, but not every nav item

    has the same width.

  </p>

​

  <section class="border p-4 mb-4">

    <!-- Pills navs -->

    <ul class="nav nav-pills nav-fill mb-3" id="ex1" role="tablist">

      <li class="nav-item" role="presentation">

        <a class="nav-link active" id="ex2-tab-1" data-mdb-toggle="pill" href="#ex2-pills-1" role="tab" aria-controls="ex2-pills-1" aria-selected="true">Link</a>

      </li>

      <li class="nav-item" role="presentation">

        <a class="nav-link" id="ex2-tab-2" data-mdb-toggle="pill" href="#ex2-pills-2" role="tab" aria-controls="ex2-pills-2" aria-selected="false">Very very very very long link</a>

      </li>

      <li class="nav-item" role="presentation">

        <a class="nav-link" id="ex2-tab-3" data-mdb-toggle="pill" href="#ex2-pills-3" role="tab" aria-controls="ex2-pills-3" aria-selected="false">Another link</a>

      </li>

    </ul>

    <!-- Pills navs -->

​

    <!-- Pills content -->

    <div class="tab-content" id="ex2-content">

      <div class="tab-pane fade show active" id="ex2-pills-1" role="tabpanel" aria-labelledby="ex2-tab-1">

        Tab 1 content

      </div>

      <div class="tab-pane fade" id="ex2-pills-2" role="tabpanel" aria-labelledby="ex2-tab-2">

        Tab 2 content

      </div>

      <div class="tab-pane fade" id="ex2-pills-3" role="tabpanel" aria-labelledby="ex2-tab-3">

        Tab 3 content

      </div>

    </div>

    <!-- Pills content -->

  </section>

​

​

  <p class="font-weight-bold mt-3">Vertical example</p>

​

  <p>

    Stack your navigation by changing the flex item direction with the

    <code>.flex-column</code> utility. Need to stack them on some viewports but not others? Use

    the responsive versions (e.g., <code>.flex-sm-column</code>).

  </p>

​

  <section class="border p-4 mb-4">

    <div class="row">

      <div class="col-3">

        <!-- Tab navs -->

        <div class="nav flex-column nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">

          <a class="nav-link active" id="v-pills-home-tab" data-mdb-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>

          <a class="nav-link" id="v-pills-profile-tab" data-mdb-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>

          <a class="nav-link" id="v-pills-messages-tab" data-mdb-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>

        </div>

        <!-- Tab navs -->

      </div>

​

      <div class="col-9">

        <!-- Tab content -->

        <div class="tab-content" id="v-pills-tabContent">

          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

            Home content

          </div>

          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">

            Profile content

          </div>

          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">

            Messages content

          </div>

        </div>

        <!-- Tab content -->

      </div>

    </div>

  </section>

​

​

</div>