Tabs

Horizontal Tabs

Tab 1 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 2 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 3 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 4 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 1 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 2 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 3 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 4 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

NOTE: Use the class "gray-tabs" next to "tabbable tabs-horizontal" to get the gray tabs.
eg:	<div class="tabbable tabs-horizontal gray-tabs">
				
<div class="tabbable tabs-horizontal">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#vartha-vtab1" role="tab" data-toggle="tab">Our Mission</a></li>
    <li><a href="#vartha-vtab2" role="tab" data-toggle="tab">Our Vision</a></li>
    <li><a href="#vartha-vtab3" role="tab" data-toggle="tab">Our Ideas</a></li>
    <li><a href="#vartha-vtab4" role="tab" data-toggle="tab">Our Technology</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="vartha-vtab1">
      <h4>Tab 1 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab2">
      <h4>Tab 2 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab3">
      <h4>Tab 3 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab4">
      <h4>Tab 4 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
  </div>
</div>
                

Vertical Tabs

Tab 1 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 2 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 3 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

Tab 4 Heading Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.

<div class="tabbable tabs-left tabs-vertical clearfix">
    <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#vartha-vtab1" role="tab" data-toggle="tab">Our Mission</a></li>
    <li><a href="#vartha-vtab2" role="tab" data-toggle="tab">Our Vision</a></li>
    <li><a href="#vartha-vtab3" role="tab" data-toggle="tab">Our Ideas</a></li>
    <li><a href="#vartha-vtab4" role="tab" data-toggle="tab">Our Technology</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="vartha-vtab1">
      <h4>Tab 1 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab2">
      <h4>Tab 2 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab3">
      <h4>Tab 3 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
    <div class="tab-pane fade" id="vartha-vtab4">
      <h4>Tab 4 Heading Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque dolorum eligendi ipsum itaque non optio quaerat ullam vitae voluptatem. Asperiores facere ipsum molestiae nulla veniam! Illo illum tempore voluptatem.</p>
    </div>
  </div>
</div>