12 Tabs
Use Tabs when you need to organize and group information on page while reducing information density.
12.1 Left Aligned Tabs
Left aligned tabs are designed to be used within a panel for short content
Content for the HOME tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Content for the PROFILE tab. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content for the ACCOUNT tab. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content for the SETTINGS tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<ul class="nav nav-tabs nav-tabs--responsive" role="tablist" id="demo-tabs">
<li role="presentation">
<a href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation" class="active">
<a href="#profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation">
<a href="#account" role="tab" data-toggle="tab">Account</a>
</li>
<li role="presentation">
<a href="#settings" role="tab" data-toggle="tab">Settings</a>
</li>
<li class="nav-tabs-mobile-caret" data-toggle="dropdown" data-target="#demotabs">
<a class="pull-right" href="#"><span class="caret"></span></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">
<p>
Content for the HOME tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
</p>
</div>
<div role="tabpanel" class="tab-pane active" id="profile">
<p>
Content for the PROFILE tab. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="account">
<p>
Content for the ACCOUNT tab. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<p>
Content for the SETTINGS tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>12.2 Centered Tabs
Centered tabs are designed to be used outside of a panel. They can be used for the overall content of a page or view.
Content for the HOME tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Content for the PROFILE tab. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content for the ACCOUNT tab. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content for the SETTINGS tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<ul class="nav nav-tabs nav-tabs--responsive nav-tabs--center" role="tablist" id="demo-tabs2">
<li role="presentation">
<a href="#home2" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation" class="active">
<a href="#profile2" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation">
<a href="#account2" role="tab" data-toggle="tab">Account</a>
</li>
<li role="presentation">
<a href="#settings2" role="tab" data-toggle="tab">Settings</a>
</li>
<li class="nav-tabs-mobile-caret" data-toggle="dropdown" data-target="#demotabs">
<a class="pull-right" href="#"><span class="caret"></span></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home2">
<p>
Content for the HOME tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
</p>
</div>
<div role="tabpanel" class="tab-pane active" id="profile2">
<p>
Content for the PROFILE tab. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="account2">
<p>
Content for the ACCOUNT tab. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings2">
<p>
Content for the SETTINGS tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>