Modal

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.


Circled nav pills

Tabs

Just Icons

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

<div class="row">
  <div class="col-md-6 mb-5">
    <div class="row">
      <div class="col-md-3">
        <ul class="nav nav-pills nav-pills-circle mb-3" id="tabs_2" role="tablist">
          <li class="nav-item">
            <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#link20" role="tab" aria-controls="home" aria-selected="true">
              <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#link21" role="tab" aria-controls="profile" aria-selected="false">
              <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-8">
        <div class="tab-content">
          <div class="tab-pane fade active show" id="link20">
            <p class="description">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
            <br><br>
            Dramatically visualize customer directed convergence without revolutionary ROI.</p>
          </div>
          <div class="tab-pane fade" id="link21">
            <p class="description">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
            <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="col-md-6">
      <ul class="nav nav-pills nav-pills-circle mb-3" id="tabs_3" role="tablist">
        <li class="nav-item">
          <a class="nav-link" id="first-tab" data-toggle="tab" href="#link22" role="tab" aria-selected="false">
            <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="second-tab" data-toggle="tab" href="#link23" role="tab" aria-selected="false">
            <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-circle active" id="third-tab" data-toggle="tab" href="#link24" role="tab" aria-selected="true">
            <span class="nav-link-icon d-block"><i class="ni ni-cloud-download-95"></i></span>
          </a>
        </li>
      </ul>
    <div class="card card-plain">
      <div class="tab-content tab-space">
        <div class="tab-pane fade active show" id="link22">
          <p class="description">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
          <br><br>
          Dramatically visualize customer directed convergence without revolutionary ROI.</p>
        </div>
        <div class="tab-pane fade" id="link23">
          <p class="description">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
          <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
        </div>
        <div class="tab-pane fade" id="link24">
          <p class="description">Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
          <br><br>Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
        </div>
      </div>
    </div>
  </div>
</div>