Loading...
Basic tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium commodi error ipsa ipsam sapiente tempore.
Lorem ipsum dolor sit amet.
<ul class="nav nav-tabs mb-3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
       aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
       aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
       aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, soluta!
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Accusantium commodi error ipsa ipsam
    sapiente tempore.
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Lorem
    ipsum dolor sit amet.
  </div>
</div>
Pill tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
<ul class="nav nav-pills mb-3" 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">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
       aria-labelledby="pills-home-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel"
       aria-labelledby="pills-profile-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel"
       aria-labelledby="pills-contact-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, soluta.
  </div>
</div>
Vertical Pill tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, totam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, fugit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, incidunt?
<div class="row">
  <div class="col-md-3">
    <div class="nav flex-column nav-pills" role="tablist"
         aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-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-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-toggle="pill"
         href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
         aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
         href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
         aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-md-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
           aria-labelledby="v-pills-home-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, totam?
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
           aria-labelledby="v-pills-profile-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quo!
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
           aria-labelledby="v-pills-messages-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, fugit.
      </div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
           aria-labelledby="v-pills-settings-tab"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, incidunt?
      </div>
    </div>
  </div>
</div>