<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="page-header"> <h1>Panels with nav tabs.<span class="pull-right label label-default">:)</span></h1> </div> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#Javascript" data-toggle="tab">Javascript</a></li> <li><a href="#PHP" data-toggle="tab">PHP</a></li> <li><a href="#Java" data-toggle="tab">JS</a></li> <li><a href="#CSharp" data-toggle="tab">C#</a></li> <li><a href="#CPlusPlus" data-toggle="tab">C++</a></li> <li><a href="#JQuery" data-toggle="tab">JQuery</a></li> <li><a href="#Lua" data-toggle="tab">Lua</a></li> <li><a href="#PERL" data-toggle="tab">PERL</a></li> <li><a href="#Python" data-toggle="tab">Python</a></li> <li><a href="#RUBY" data-toggle="tab">RUBY</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="Javascript"> <div class="container"> Version: <input id="182" type="radio" name="JavascriptVersion" selected="seleted"><label for="182">1.8.2</label></input>   <input id="191" type="radio" name="JavascriptVersion"><label for="191">1.9.1</label></input> </div> <div class="col-lg-12" style="padding: 0px; margin: 0px;"> <div class="col-md-6 col-sm-6" style=" padding: 0px; margin: 0px;"> <div class="container-fluid" style="padding: 4px; margin: 2px; font-weight: 600; padding-bottom: 7px; border-bottom: solid 1px #999;">POST Results</div> <div class="clearfix"></div> <div class="container-fluid" style="padding: 8px; margin: 5px; border: solid 1px #999; border-radius: 5px;">Default Left</div> </div> <div class="col-md-6 col-sm-6" style="padding: 0px; margin: 0px;"> <div class="container-fluid" style="padding: 4px; margin: 2px; font-weight: 600; padding-bottom: 7px; /*border-bottom: solid 1px #999;*/">PARSE Results</div> <div class="clearfix"></div> <div class="container-fluid" style="padding: 8px; margin: 5px; border: solid 1px #999; border-radius: 5px;">Default Right</div> </div> </div> </div> <div class="tab-pane fade" id="PHP">PHP 2</div> <div class="tab-pane fade" id="Java">Java</div> <div class="tab-pane fade" id="CSharp">C#</div> <div class="tab-pane fade" id="CPlusPlus">C++</div> <div class="tab-pane fade" id="JQuery">JQuery</div> <div class="tab-pane fade" id="Lua">Lua</div> <div class="tab-pane fade" id="PERL">PERL</div> <div class="tab-pane fade" id="Python">Python</div> <div class="tab-pane fade" id="RUBY">RUBY</div> </div> </div> </div> </div> </div> </div>

.panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .panel.with-nav-tabs .nav-justified{ margin-bottom: -1px; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { color: #555; background-color: #fff; border-color: #ddd; border-bottom-color: transparent; }