Mono provides a variety of Bootstrap tabs components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.

Default Tabs


<ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home" role="tab"
      aria-controls="nav-tabs" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile" role="tab"
      aria-controls="nav-profile" aria-selected="false">Profile</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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

Tab with Icons


<ul class="nav nav-tabs mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">
      <i class="mdi mdi-star-outline"></i>
      Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">
      <i class="mdi mdi-account"></i>
      Profile</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">
      <i class="mdi mdi-checkbox-multiple-blank-outline"></i>
      Dropdown</a>

    <div class="dropdown-menu">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

Tab with Underline


<ul class="nav nav-underline-active-primary mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">Profile</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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

Justified Tabs


<ul class="nav nav-underline-active-primary mb-3 justify-content-between" id="pills-tab12" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-home-underline-primary" role="tab"
      aria-controls="nav-tabs" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile-underline-primary" role="tab"
      aria-controls="nav-profile" aria-selected="false">Profile</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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home-underline-primary" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile-underline-primary" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

Pill Tabs


<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 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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>
orem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco labo ris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
Accusamus cumque unde autem asperiores voluptatem aut quidem cum. Ullam quas alias repellat ipsum exercitationem blanditiis explicabo, distinctio qui nam, omnis nisi suscipit ipsa, magnam aperiam? Recusandae at, quae rem quaerat officiis perferendis hic? Pariatur minima iusto voluptate qui.

Tab with Icons


<ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#nav-tabs-home2" role="tab"
      aria-controls="nav-tabs" aria-selected="true">
      <i class="mdi mdi-star-outline"></i>
      Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav-profile-tab" data-toggle="pill" href="#nav-profile2" role="tab"
      aria-controls="nav-profile" aria-selected="false">
      <i class="mdi mdi-account"></i>
      Profile</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">
      <i class="mdi mdi-checkbox-multiple-blank-outline"></i>
      Dropdown</a>

    <div class="dropdown-menu">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-tabs-home2" role="tabpanel" aria-labelledby="nav-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>

Pill Tabs


<ul class="nav nav-custom-pills mb-3" id="pills-tab-custom" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home-custom-pill" 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-custom-pill" role="tab"
      aria-controls="pills-profile" aria-selected="false">Profile</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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="pills-home-custom-pill" role="tabpanel" aria-labelledby="pills-home-tab">
    ...
  </div>
  <div class="tab-pane fade" id="pills-profile-custom-pill" role="tabpanel" aria-labelledby="nav-profile-tab">
    ...
  </div>
</div>
lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco labo ris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
Accusamus cumque unde autem asperiores voluptatem aut quidem cum. Ullam quas alias repellat ipsum exercitationem blanditiis explicabo, distinctio qui nam, omnis nisi suscipit ipsa, magnam aperiam? Recusandae at, quae rem quaerat officiis perferendis hic? Pariatur minima iusto voluptate qui.

Justified Pill Tabs


<ul class="nav nav-pills mb-3 justify-content-between" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home-justify-content-between"
      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-justify-content-between"
      role="tab" aria-controls="pills-profile" aria-selected="false">Profile</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">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<div class="tab-content mt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="pills-home-justify-content-between" role="tabpanel"
    aria-labelledby="pills-home-tab">
    orem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
    magna
    aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco labo ris nisi ut aliquip ex ea commodo
    consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
  </div>
  <div class="tab-pane fade" id="pills-profile-justify-content-between" role="tabpanel"
    aria-labelledby="nav-profile-tab">
    Accusamus cumque unde autem asperiores voluptatem aut quidem cum. Ullam quas alias repellat ipsum
    exercitationem
    blanditiis explicabo, distinctio qui nam, omnis nisi suscipit ipsa, magnam aperiam? Recusandae at, quae rem
    quaerat
    officiis perferendis hic? Pariatur minima iusto voluptate qui.
  </div>
</div>
orem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco labo ris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
Accusamus cumque unde autem asperiores voluptatem aut quidem cum. Ullam quas alias repellat ipsum exercitationem blanditiis explicabo, distinctio qui nam, omnis nisi suscipit ipsa, magnam aperiam? Recusandae at, quae rem quaerat officiis perferendis hic? Pariatur minima iusto voluptate qui.

Contacts

Add New
User Image
Selena Wagner Designer
User Image
Walter Reuter Developer
User Image
Larissa Gebhardt Cyber Punk
User Image
Albrecht Straub Photographer
User Image
Leopold Ebert Fashion Designer
User Image
Selena Wagner Photographer