Cupid Love User Guide

Use the below code to display Tabs:

<div class="tab [ Tab Style class ] clearfix">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li>
      <a href="#tab0-1" data-toggle="tab" aria-expanded="false">
        [ Tab1 Title ]
      </a>
    </li>
    <li>
      <a href="#tab0-2" data-toggle="tab" aria-expanded="false">
        [ Tab2 Title ]
      </a>
    </li>
    <li class="active">
      <a href="#tab0-3" data-toggle="tab" aria-expanded="true">
        [ Tab3 Title ]
      </a>
    </li>
    <li>
      <a href="#tab0-4" data-toggle="tab">
        [ Tab4 Title ]
      </a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="tab0-1">
      [ Tab1 Description ]
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab0-2">
      [ Tab2 Description ]
    </div>
    <div role="tabpanel" class="tab-pane fade active in" id="tab0-3">
      [ Tab3 Description ]
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab0-4">
      [ Tab4 Description ]
    </div>
  </div>

</div>

NoteMake sure you use unique IDs for each Tab Items and Tab Container.

You can change the tab styles with using following classes :