<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-lg-3 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item active text-center red"> <h5 class="glyphicon glyphicon-globe"></h5><br/>Overview </a> <a href="#" class="list-group-item text-center"> <h5 class="glyphicon glyphicon-stats"></h5><br/>Details </a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <!-- flight section --> <div class="bhoechie-tab-content active"> <center> <h3 style="margin-top: 0;" class="redtext">Server1</h3> PING: <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span> SSH: <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span> DISK: <span class=" glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span> <br/><br/> 172.54.33.80 </center> </div> </div> </div> <div class="col-lg-3 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item active text-center green"> <h5 class="glyphicon glyphicon-globe"></h5><br/>Overview </a> <a href="#" class="list-group-item text-center"> <h5 class="glyphicon glyphicon-stats"></h5><br/>Details </a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <!-- flight section --> <div class="bhoechie-tab-content active"> <center> <h3 style="margin-top: 0;">Server2</h3> PING: <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span> SSH: <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span> DISK: <span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span> <br/><br/> 172.54.33.80 </center> </div> </div> </div> </div> </div>

.list-group-item{ padding:0; } .green{ background-color:green !important; } .red{ background-color:red !important; } .redtext{ color: red; } /* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 5px; margin-left: 5px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #000; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ /* background-color: #5A55A3; background-image: #5A55A3; */ color: #ffffff; } div.bhoechie-tab-content{ /*background-color: #ffffff;*/ /* border: 1px solid #eeeeee; */ padding-left: 2px; padding-top: 2px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; }