Tabs with Border botton

by shail

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 style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" 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

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    border-bottom-color:#ddd;
    outline:0;
}
}