Bootstrap Notes
  • Welcome
  • Setup Notes
  • Navbar Examples
  • Tabs & Pills
  • Tabs & Pills PLAY
Twitter Bootstrap Home

Tabs & Pills

  • Tabs
  • Side Tabs
  • Stacked Tabs
  • Pills
  • Stacked Pills
×

PAGE LAYOUT NOTE

This page follows Twitter Bootstrap's "Fluid layout" template found online here.

×

CONSULT THE DOCS!

The examples given here depend upon and cannot replace Twitter Bootstrap's own excellent documentation.

Basic Tabs

  • Markup
  • Twitter Docs
  • Tab 3
  • Tab 4

The Markup

See the Bootstrap documentation

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#pane4" data-toggle="tab">Tab 4</a></li>
  </ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane active">
      <h4>The Markup</h4>
      <pre>Code here ...</pre>
    </div>
    <div id="pane2" class="tab-pane">
    <h4>Pane 2 Content</h4>
      <p> and so on ...</p>
    </div>
    <div id="pane3" class="tab-pane">
      <h4>Pane 3 Content</h4>
    </div>
    <div id="pane4" class="tab-pane">
      <h4>Pane 4 Content</h4>
    </div>
  </div><!-- /.tab-content -->
</div><!-- /.tabbable -->

See the docs!

Check out Twitter Bootstrap's tabs documentation:

Tabs Markup Documentation

Tabs JavaScript Documentation

Pane 3 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Pane 4 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Side Tabs

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

The Markup

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    //and so on ...

Pane 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas.

Pane 3 Content

Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Pane 4 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti.

Stacked Tabs

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

The Markup

<div class="tabbable">
  <ul class="nav nav-tabs nav-stacked">
    //and so on ...

Pane 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas.

Pane 3 Content

Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Pane 4 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti.

Pills

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

The Markup

<div class="tabbable">
  <ul class="nav nav-pills">
    //and so on ...

Pane 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas.

Pane 3 Content

Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Pane 4 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti.

Stacked Pills

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

The Markup

<div class="tabbable">
  <ul class="nav nav-pills nav-stacked">
    //and so on ...

Pane 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas.

Pane 3 Content

Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.

Pane 4 Content

Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti.


By David Cochran of Oklahoma Wesleyan University and aLittleCode.com for webdesign.tutsplus.com. Free for your use! (No warranties, no guarantees.)