"Nav bottom Tab & Nav Tab bottom"
Bootstrap 3.3.0 Snippet by iammahesh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <h3>Nav Tab bottom </h3> <!-- tabs --> <div class="tabbable tabs-bottom"> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class="jumbotron"> <h1>Home Tab</h1> <p>These lists are meant to identify articles which deserve editor attention because they are the most important for s.</p> </div> </div> <div class="tab-pane" id="about"> <div class="jumbotron"> <h1>About Tab</h1> <p>because they are the most important for an encyclopedia to have, as determined by the community of participating editors..</p> </div> </div> <div class="tab-pane" id="services"> <div class="jumbotron"> <h1>Services Tab</h1> <p>meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have.</p> </div> </div> <div class="tab-pane" id="contact"> <div class="jumbotron"> <h1>Contact Tab</h1> <p>deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors..</p> </div> </div> </div> <!-- tab content --> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#about" data-toggle="tab">About</a></li> <li><a href="#services" data-toggle="tab">Services</a></li> <li><a href="#contact" data-toggle="tab">Contact</a></li> </ul> </div> <!-- /tabs --> </div> </div> </div>
/* custom inclusion of right, left and below tabs */ .tabs-below > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-bottom > .nav-tabs { border-top: 1px solid #ddd; } .tabs-bottom > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-bottom > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-top-color: #ddd; border-bottom-color: transparent; } .tabs-bottom > .nav-tabs > .active > a, .tabs-bottom > .nav-tabs > .active > a:hover, .tabs-bottom > .nav-tabs > .active > a:focus { border-color: transparent #ddd #ddd #ddd; }

Related: See More


Questions / Comments: