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>