Setting the Directions of Tabs - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Tab

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Tab

Description

Setting the Directions of Tabs

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Example of Setting the Directions of Tabs</title> 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

  <style type="text/css">
h3{<!--   w w w.  j  av  a  2 s.  c  o m-->
  padding: 0 10px;
  margin-top: 20px;
  background: #F2F2F2;
}
.bs-example{
  margin: 20px;
}
</style> 
 </head> 
 <body> 
  <div> 
   <h3>Tabs on the top (Default)</h3> 
   <div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li><a data-toggle="tab" href="#dA">Section A</a></li> 
     <li><a data-toggle="tab" href="#dB">Section B</a></li> 
     <li class="active"><a data-toggle="tab" href="#dC">Section C</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="dA" class="tab-pane"> 
      <p>This Section A.</p> 
     </div> 
     <div id="dB" class="tab-pane"> 
      <p>This Section B.</p> 
     </div> 
     <div id="dC" class="tab-pane active"> 
      <p>This Section C.</p> 
     </div> 
    </div> 
   </div> 
   <hr> 
   <h3>Tabs on the bottom</h3> 
   <div class="tabbable tabs-below"> 
    <div class="tab-content"> 
     <div id="bA" class="tab-pane"> 
      <p>This Section A.</p> 
     </div> 
     <div id="bB" class="tab-pane"> 
      <p>This Section B.</p> 
     </div> 
     <div id="bC" class="tab-pane active"> 
      <p>This Section C.</p> 
     </div> 
    </div> 
    <ul class="nav nav-tabs"> 
     <li><a data-toggle="tab" href="#bA">Section A</a></li> 
     <li><a data-toggle="tab" href="#bB">Section B</a></li> 
     <li class="active"><a data-toggle="tab" href="#bC">Section C</a></li> 
    </ul> 
   </div> 
   <hr> 
   <h3>Tabs on the left</h3> 
   <div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li><a data-toggle="tab" href="#lA">Section A</a></li> 
     <li><a data-toggle="tab" href="#lB">Section B</a></li> 
     <li class="active"><a data-toggle="tab" href="#lC">Section C</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="lA" class="tab-pane"> 
      <p>This Section A.</p> 
     </div> 
     <div id="lB" class="tab-pane"> 
      <p>This Section B.</p> 
     </div> 
     <div id="lC" class="tab-pane active"> 
      <p>This Section C.</p> 
     </div> 
    </div> 
   </div> 
   <hr> 
   <h3>Tabs on the right</h3> 
   <div class="tabbable tabs-right"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a data-toggle="tab" href="#rA">Section A</a></li> 
     <li><a data-toggle="tab" href="#rB">Section B</a></li> 
     <li><a data-toggle="tab" href="#rC">Section C</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="rA" class="tab-pane"> 
      <p>This Section A.</p> 
     </div> 
     <div id="rB" class="tab-pane"> 
      <p>This Section B.</p> 
     </div> 
     <div id="rC" class="tab-pane active"> 
      <p>This Section C.</p> 
     </div> 
    </div> 
   </div> 
  </div>   
 </body>
</html>

Related Tutorials