GitHub Mark

GitHub

Tabs

Tabs divide content into meaningful sections that occupy less screen space. Users can easily access and focus on the content they're interested in, while hiding the content that isn't needed at that moment.

Tabs

  • Homer
  • Marge
  • Lisa
  • Bart
  • Maggie
  • Peter
  • Lois
  • Meg
  • Chris
  • Stewie
  • Hank
  • Peggy
  • Bobby
  • Fred
  • Wilma
  • Pebbles
  • Dino
  • Baby Puss
<!-- Tab Navigation & Panels -->
<div id="tab-browsing" class="tab-browsing">
<ul class="nav nav-tabs">
<li class="active">
<a href=""#panel-simpsons" data-toggle="tab">The Simpsons</a>
</li>
<li>
<a href=""#panel-griffins" data-toggle="tab">The Griffins</a>
</li>
<li">
<a href=""#panel-hills" data-toggle="tab">The Hills</a>
</li>
<li>
<a href=""#panel-flinstones" data-toggle="tab">The Flinstones</a>
</li>
</ul>
<div class="tab-content clearfix">
<div id="panel-simpsons" class="tab-pane active">
<ul>
<li>Homer</li>
<li>Marge</li>
<li>Lisa</li>
<li>Bart</li>
<li>Maggie</li>
</ul>
</div>
<div id="panel-Griffins" class="tab-pane">
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Meg</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
</div>
<div id="panel-hills" class="tab-pane">
<ul>
<li>Hank</li>
<li>Peggy</li>
<li>Bobby</li>
</ul>
</div>
<div id="panel-flintstones" class="tab-pane">
<ul>
<li>Fred</li>
<li>Wilma</li>
<li>Pebbles</li>
<li>Dino</li>
<li>Baby Puss</li>
</ul>
</div>
</div>
</div>

Vertical Tabs

Lorem ipsum dolor sit amet, charetra varius rci quis tortor imperdiet venenatis quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.

Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.

Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum auctor accumsan. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.

<!-- Tab Navigation & Panels -->
<div id="tab-browsing" class="tab-browsing">
<ul class="nav nav-tabs">
<li class="active">
<a href=""#panel-simpsons" data-toggle="tab">The Simpsons</a>
</li>
<li>
<a href=""#panel-griffins" data-toggle="tab">The Griffins</a>
</li>
<li">
<a href=""#panel-hills" data-toggle="tab">The Hills</a>
</li>
<li>
<a href=""#panel-flinstones" data-toggle="tab">The Flinstones</a>
</li>
</ul>
<div class="tab-content clearfix">
<div id="panel-simpsons" class="tab-pane active">
<ul>
<li>Homer</li>
<li>Marge</li>
<li>Lisa</li>
<li>Bart</li>
<li>Maggie</li>
</ul>
</div>
<div id="panel-Griffins" class="tab-pane">
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Meg</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
</div>
<div id="panel-hills" class="tab-pane">
<ul>
<li>Hank</li>
<li>Peggy</li>
<li>Bobby</li>
</ul>
</div>
<div id="panel-flintstones" class="tab-pane">
<ul>
<li>Fred</li>
<li>Wilma</li>
<li>Pebbles</li>
<li>Dino</li>
<li>Baby Puss</li>
</ul>
</div>
</div>
</div>