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>