Tabs with Border botton

by Torwan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Section 1</a></li>
    <li class=""><a data-toggle="tab" href="#tab2">Section 2</a></li>
    <li class=""><a data-toggle="tab" href="#tab3">Section 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <p>I'm in Section 1.</p>
    </div>
    <div id="tab2" class="tab-pane">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    <div id="tab3" class="tab-pane">
      <p>What up girl, this is Section 3.</p>
    </div>
  </div>
</div>

CSS

.tabbable {
  margin: 10px;
  height: 300px;
  overflow: hidden;
  /*border-bottom: 1px solid #ccc;*/
}

.nav-tabs {
  margin: 0;
}

.tab-content {
  height: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}