Tabs

Vertical Tabs

  • Home
  • Tab 1
  • Tab 2
  • Tab 3

Content 1

Content 2

Content 3

Content 4


 1<div class="tabs-container row-fluid">
 2  <ul class="tabs span4">
 3    <li data-target="#home" class="tab-anchor active">Home<i class="icon-angle-right list-icon"></i></li>
 4    <li data-target="#tab2" class="tab-anchor">Tab 1<i class="icon-angle-right list-icon"></i></li>
 5    <li data-target="#tab3" class="tab-anchor">Tab 2<i class="icon-angle-right list-icon"></i></li>
 6    <li data-target="#this-tab" class="tab-anchor">Tab 3<i class="icon-angle-right list-icon"></i></li>
 7  </ul>
 8
 9  <div class="tab-content span8 box box-white">
10    <div class="box-inner tab-pane active" id="home"><p>Content 1</p></div>
11    <div class="box-inner tab-pane" id="tab2"><p>Content 2</p></div>
12    <div class="box-inner tab-pane" id="tab3"><p>Content 3</p></div>
13    <div class="box-inner tab-pane" id="this-tab"><p>Content 4</p></div>
14  </div>
15</div>

Horizontal Tabs

  • Home
  • Tab 1
  • Tab 2
  • Tab 3

Content 1

Content 2

Content 3

Content 4

 1
 2<div class="tabs-container">
 3  <div class="row-fluid">
 4    <ul class="tabs horizontal span9">
 5      <li data-target="#home-hz" class="tab-anchor active">Home</li>
 6      <li data-target="#tab2-hz" class="tab-anchor">Tab 1</li>
 7      <li data-target="#tab3-hz" class="tab-anchor">Tab 2</li>
 8      <li data-target="#this-tab-hz" class="tab-anchor">Tab 3</li>
 9    </ul>
10  </div>
11  <div class="row-fluid">
12    <div class="tab-content span9 box box-white">
13      <div class="box-inner tab-pane active" id="home-hz"><p>Content 1</p></div>
14      <div class="box-inner tab-pane" id="tab2-hz"><p>Content 2</p></div>
15      <div class="box-inner tab-pane" id="tab3-hz"><p>Content 3</p></div>
16      <div class="box-inner tab-pane" id="this-tab-hz"><p>Content 4</p></div>
17    </div>
18  </div>
19</div>