<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="col-md-12"> <!-- Parent Nav tabs --> <ul class="nav nav-tabs" role="tablist" id="schemaGroupsTab"> <li><a href="#ServiceMetric" role="tab" data-toggle="tab">Service Metric Schema</a></li> <li><a href="#NetworkMetric" role="tab" data-toggle="tab">Network Schema</a></li> <li><a href="#SnitchMetric" role="tab" data-toggle="tab">Snitch</a></li> <li><a href="#QueryLogMetric" role="tab" data-toggle="tab">Online Query Log</a></li> </ul> <!-- / Parent Nav tabs --> <!-- Parent Tab panes --> <div class="tab-content"> <div class="tab-pane" id="ServiceMetric"> <div class="tab-pane-content"> <!-- Child Nav tabs --> <ul class="nav nav-tabs" role="tablist" id="serviceGroupsTab"> <li><a href="#fulfillOrder" role="tab" data-toggle="tab">fulfillOrder</a></li> <li><a href="#unfulfillDigitalItem" role="tab" data-toggle="tab">unfulfillDigitalItem</a></li> <li><a href="#fulfillTemporaryItem" role="tab" data-toggle="tab">fulfillTemporaryItem</a></li> </ul> <!-- / Child Nav tabs --> <!-- Child Tab panes --> <div class="tab-content"> <div class="tab-pane" id="fulfillOrder"> <div class="tab-pane-content"> enpyt </div> </div> </div> </div> </div> </div> </div>

/*! * bootstrap-vertical-tabs - v1.1.0 * https://dbtek.github.io/bootstrap-vertical-tabs * 2014-06-06 * Copyright (c) 2014 Ä°smail Demirbilek * License: MIT */ .monitors-div { float: none; } .tab-pane-content { padding: 8px; margin: 2px; } .tab-pane .nav-tabs { float: left; border-right: 1px solid #ddd; border-bottom: none; } .tab-pane .nav-tabs li { float: none; margin-right: -1px; } .tab-pane .nav-tabs li a { border-radius: 4px 0px 0px 4px; } .tab-pane .nav-tabs li.active a { border-right-color: transparent; border-bottom-color: #ddd; border-radius: 4px 0px 0px 4px; margin-right: 0; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(60%, #fff), to(#f4f4f4)); background-image: -webkit-linear-gradient(#fff, #fff 60%, #f4f4f4); background-image: -moz-linear-gradient(top, #fff, #fff 60%, #f4f4f4); background-image: -o-linear-gradient(#fff, #fff 60%, #f4f4f4); background-image: linear-gradient(#fff, #fff 60%, #f4f4f4); background-repeat: no-repeat; } .tab-pane .tab-pane { overflow-y: auto; }