title: How to get bootstrap tabs to show up on the bottom of the left or right side
body: <p>I have been trying to make bootstrap tabs show up on the BOTTOM LEFT and/or BOTTOM RIGHT hand side.  I cannot find any information on the net describing how to do this.  The closest I've found shows tabs to the left and right, but at the top of the side, not the bottom.</p>
  
  <p>Here's the code I have thus far:</p>
  
  <pre><code>&lt;div id="tabHeaderId01" class="tabbable tabs-left"&gt;
    &lt;ul id="tabListId" class="nav nav-tabs navbar-right"&gt;
      &lt;li id="tabid_One" class="active"&gt;&lt;a href="#one" data-toggle="tab"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabid_Two"&gt;&lt;a href="#two" data-toggle="tab"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tabid_Twee"&gt;&lt;a href="#twee" data-toggle="tab"&gt;Twee&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabContentsId01" class="tab-content"&gt;
      &lt;div class="tab-pane active" id="one"&gt;
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
     Aliquam in felis sit amet augue.
      &lt;/div&gt;
      &lt;div class="tab-pane" id="two"&gt;
      Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
     Quisque mauris augue, molestie tincidunt condimentum vitae.
      &lt;/div&gt;
      &lt;div class="tab-pane" id="twee"&gt;
      Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
     Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>  .tabs-right-align
    {
      text-align: right;
      font-size: 0;
      /* prevent floated child bug */
    }
    .tabs-right-align&gt;li 
    {
      display: inline-block;
      clear: left;
      float: none;
      text-align: right;
      font-size: 12px;
    }
  
  /* custom inclusion of right, left and below tabs */
  
  .tabs-below &gt; .nav-tabs,
  .tabs-right &gt; .nav-tabs,
  .tabs-left &gt; .nav-tabs {
    border-bottom: 0;
  }
  
  .nav-tabs
  {
    border-bottom: 0px;
  }
  .tab-content
  {
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  
  .tab-content &gt; .tab-pane,
  .pill-content &gt; .pill-pane {
    display: none;
  }
  
  .tab-content &gt; .active,
  .pill-content &gt; .active {
    display: block;
    min-height: 100px;
  }
  
  .tabs-below &gt; .nav-tabs {
    border-top: 1px solid #ddd;
  }
  
  .tabs-below &gt; .nav-tabs &gt; li {
    margin-top: -1px;
    margin-bottom: 0;
  }
  
  .tabs-below &gt; .nav-tabs &gt; li &gt; a {
    -webkit-border-radius: 0px 0 4px 4px;
       -moz-border-radius: 0px 0 4px 4px;
            border-radius: 0px 0 4px 4px;
  }
  
  .tabs-below &gt; .nav-tabs &gt; li &gt; a:hover,
  .tabs-below &gt; .nav-tabs &gt; li &gt; a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
  }
  
  .tabs-below &gt; .nav-tabs &gt; .active &gt; a,
  .tabs-below &gt; .nav-tabs &gt; .active &gt; a:hover,
  .tabs-below &gt; .nav-tabs &gt; .active &gt; a:focus {
    border-color: transparent #ddd #ddd #ddd;
  }
  
  .tabs-left &gt; .nav-tabs &gt; li,
  .tabs-right &gt; .nav-tabs &gt; li {
    float: none;
  }
  
  .tabs-left &gt; .nav-tabs &gt; li &gt; a,
  .tabs-right &gt; .nav-tabs &gt; li &gt; a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
  }
  
  .tabs-left &gt; .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
  }
  
  .tabs-left &gt; .nav-tabs &gt; li &gt; a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
  }
  
  .tabs-left &gt; .nav-tabs &gt; li &gt; a:hover,
  .tabs-left &gt; .nav-tabs &gt; li &gt; a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
  }
  
  .tabs-left &gt; .nav-tabs .active &gt; a,
  .tabs-left &gt; .nav-tabs .active &gt; a:hover,
  .tabs-left &gt; .nav-tabs .active &gt; a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
  }
  
  .tabs-right &gt; .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
  }
  
  .tabs-right &gt; .nav-tabs &gt; li &gt; a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
       -moz-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
  }
  
  .tabs-right &gt; .nav-tabs &gt; li &gt; a:hover,
  .tabs-right &gt; .nav-tabs &gt; li &gt; a:focus {
    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
  }
  
  .tabs-right &gt; .nav-tabs .active &gt; a,
  .tabs-right &gt; .nav-tabs .active &gt; a:hover,
  .tabs-right &gt; .nav-tabs .active &gt; a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
  }
  </code></pre>
  
  <p>I have a bootply demo with what happens now:</p>
  
  <p><a href="http://www.bootply.com/p5Z5uc6Gwb" rel="nofollow">http://www.bootply.com/p5Z5uc6Gwb</a></p>
  
  <p>I'm having TWO issues:</p>
  
  <ol>
  <li><p>I cannot get the tabs to show up at the bottom of the left side.  When I try to do a 'navbar-right' obviously this will not work.  But there is no 'navbar-bottom', so how do I get the tabs to show up at the bottom of the left side?</p></li>
  <li><p>I need to be able to have a border for the content that encapsulates it.  However, when I set a border to the tab-contents, it sticks a border around EVERYTHING, including the tabs.  What am I doing wrong?</p></li>
  </ol>
  
  <p>Thanks in advance for your help!</p>