Tabs– molla-theme

Home
Tabs

Left Align Style

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum.

Nobis perspiciatis natus cum, sint dolore earum rerum tempora aspernatur numquam velit tempore omnis, delectus repellat facere voluptatibus nemo non fugiat consequatur repellendus! Enim, commodi, veniam ipsa voluptates quis amet.

Perspiciatis quis nobis, adipisci quae aspernatur, nulla suscipit eum. Dolorum, earum. Consectetur pariatur repellat distinctio atque alias excepturi aspernatur nisi accusamus sed molestias ipsa numquam eius, iusto, aliquid, quis aut.

Quis nobis, adipisci quae aspernatur, nulla suscipit eum. Dolorum, earum. Consectetur pariatur repellat distinctio atque alias excepturi aspernatur nisi accusamus sed molestias ipsa numquam eius, iusto, aliquid, quis aut.

<ul class="nav nav-tabs nav-tabs-bg" id="tabs-1" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-1-tab" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-2-tab" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content tab-content-border" id="tab-content-1">
  <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

<ul class="nav nav-tabs" id="tabs-2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-5-tab" data-toggle="tab" href="#tab-5" role="tab" aria-controls="tab-5" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-6-tab" data-toggle="tab" href="#tab-6" role="tab" aria-controls="tab-6" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content tab-content-border" id="tab-content-2">
  <div class="tab-pane fade show active" id="tab-5" role="tabpanel" aria-labelledby="tab-5-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-6" role="tabpanel" aria-labelledby="tab-6-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

Centered Align Style

<ul class="nav nav-tabs nav-tabs-bg justify-content-center" id="tabs-3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-9-tab" data-toggle="tab" href="#tab-9" role="tab" aria-controls="tab-9" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-10-tab" data-toggle="tab" href="#tab-10" role="tab" aria-controls="tab-10" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content tab-content-border" id="tab-content-3">
  <div class="tab-pane fade show active" id="tab-9" role="tabpanel" aria-labelledby="tab-9-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-10" role="tabpanel" aria-labelledby="tab-10-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

<ul class="nav nav-tabs justify-content-center" id="tabs-4" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-13-tab" data-toggle="tab" href="#tab-13" role="tab" aria-controls="tab-13" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-14-tab" data-toggle="tab" href="#tab-14" role="tab" aria-controls="tab-14" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content tab-content-border" id="tab-content-4">
  <div class="tab-pane fade show active" id="tab-13" role="tabpanel" aria-labelledby="tab-13-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-14" role="tabpanel" aria-labelledby="tab-14-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

Line Style Tabs

<ul class="nav nav-pills" id="tabs-5" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-17-tab" data-toggle="tab" href="#tab-17" role="tab" aria-controls="tab-17" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-18-tab" data-toggle="tab" href="#tab-18" role="tab" aria-controls="tab-18" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content" id="tab-content-5">
  <div class="tab-pane fade show active" id="tab-17" role="tabpanel" aria-labelledby="tab-17-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-18" role="tabpanel" aria-labelledby="tab-18-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

<ul class="nav nav-pills justify-content-center" id="tabs-6" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab-21-tab" data-toggle="tab" href="#tab-21" role="tab" aria-controls="tab-21" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-22-tab" data-toggle="tab" href="#tab-22" role="tab" aria-controls="tab-22" aria-selected="false">Tab 2</a>
  </li>
</ul>
<div class="tab-content" id="tab-content-6">
  <div class="tab-pane fade show active" id="tab-21" role="tabpanel" aria-labelledby="tab-21-tab">
    <p>
      1...
    </p>
  </div>
  <!-- .End .tab-pane -->
  <div class="tab-pane fade" id="tab-22" role="tabpanel" aria-labelledby="tab-22-tab">
    <p>
      2...
    </p>
  </div>
  <!-- .End .tab-pane -->
</div>
<!-- End .tab-content -->

Vertical Style

<div class="tabs-vertical">
  <ul class="nav nav-tabs nav-tabs-bg flex-column" id="tabs-7" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab-25-tab" data-toggle="tab" href="#tab-25" role="tab" aria-controls="tab-25" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-26-tab" data-toggle="tab" href="#tab-26" role="tab" aria-controls="tab-26" aria-selected="false">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content tab-content-border" id="tab-content-7">
    <div class="tab-pane fade show active" id="tab-25" role="tabpanel" aria-labelledby="tab-25-tab">
      <p>
        1...
      </p>
    </div>
    <!-- .End .tab-pane -->
    <div class="tab-pane fade" id="tab-26" role="tabpanel" aria-labelledby="tab-26-tab">
      <p>
        2...
      </p>
    </div>
    <!-- .End .tab-pane -->
  </div>
  <!-- End .tab-content -->
</div>
<!-- End .tabs-vertical -->

<div class="tabs-vertical">
  <ul class="nav nav-tabs flex-column" id="tabs-8" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab-29-tab" data-toggle="tab" href="#tab-29" role="tab" aria-controls="tab-29" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-30-tab" data-toggle="tab" href="#tab-30" role="tab" aria-controls="tab-30" aria-selected="false">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-31-tab" data-toggle="tab" href="#tab-31" role="tab" aria-controls="tab-31" aria-selected="false">Tab 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-32-tab" data-toggle="tab" href="#tab-32" role="tab" aria-controls="tab-32" aria-selected="false">Tab 4</a>
    </li>
  </ul>
  <div class="tab-content tab-content-border" id="tab-content-8">
    <div class="tab-pane fade show active" id="tab-29" role="tabpanel" aria-labelledby="tab-29-tab">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget
        felis facilisis fermentum int dolore earum rerum tempora aspernatur numquam velit.
      </p>
    </div>
    <!-- .End .tab-pane -->
    <div class="tab-pane fade" id="tab-30" role="tabpanel" aria-labelledby="tab-30-tab">
      <p>
        Nobis perspiciatis natus cum, sint dolore earum rerum tempora aspernatur numquam velit tempore omnis, delectus repellat facere voluptatibus nemo non fugiat consequatur repellendus! Enim, commodi, veniam ipsa voluptates quis
        amet.
      </p>
    </div>
    <!-- .End .tab-pane -->
    <div class="tab-pane fade" id="tab-31" role="tabpanel" aria-labelledby="tab-31-tab">
      <p>
        Perspiciatis quis nobis, adipisci quae aspernatur, nulla suscipit eum. Dolorum, earum. Consectetur pariatur repellat distinctio atque alias excepturi aspernatur nisi accusamus sed molestias ipsa numquam eius, iusto, aliquid,
        quis aut.
      </p>
    </div>
    <!-- .End .tab-pane -->
    <div class="tab-pane fade" id="tab-32" role="tabpanel" aria-labelledby="tab-32-tab">
      <p>Quis nobis, adipisci quae aspernatur, nulla suscipit eum. Dolorum, earum. Consectetur pariatur repellat distinctio atque alias excepturi aspernatur nisi accusamus sed molestias ipsa numquam eius, iusto, aliquid, quis aut.</p>
    </div>
    <!-- .End .tab-pane -->
  </div>
  <!-- End .tab-content -->
</div>
<!-- End .tabs-vertical -->

Left Align Style

Centered Align Style

Line Style Tabs

Vertical Style

Information

Customer Service

My Account