Tabs#

Tabs enable quick switch between different views.

Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

<ul class="tab tab-block">
  <li class="tab-item active">
    <a href="#">Music</a>
  </li>
  <li class="tab-item">
    <a href="#" class="active">Playlists</a>
  </li>
  <li class="tab-item">
    <a href="#">Radio</a>
  </li>
  <li class="tab-item">
    <a href="#">Connect</a>
  </li>
</ul>

If you need badges on tabs, you can add badge class to the element within tab-item.

<ul class="tab tab-block">
  <li class="tab-item active">
    <a href="#" class="badge" data-badge="9">
      Music
    </a>
  </li>
</ul>

You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

<ul class="tab">
  <li class="tab-item active">
    <a href="#">
      Music
    </a>
  </li>
  <li class="tab-item tab-action">
    <div class="input-group input-inline">
      <input class="form-input input-sm" type="text">
      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
    </div>
  </li>
</ul>