Bootstrap 3 tabs-toolbar

by Dhanck

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<div class="">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab_a" data-toggle="tab">Tab A</a></li>
    <li><a href="#tab_b" data-toggle="tab">Tab B</a></li>
    <li><a href="#tab_c" data-toggle="tab">Tab C</a></li>
    <li><a href="#tab_d" data-toggle="tab">Tab D</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab_a">









      <div class="toolbar">
        <div class="viewedit">
          <div class="view active"><span class="glyphicon glyphicon-eye-open"></span> View</div>
          <div class="edit disabled" ><span class="glyphicon glyphicon-edit"></span> Edit</div>
        </div>
        <div class="versep"></div>
        <div class="underline"><span class="glyphicon glyphicon-calendar"></span></div>
        <div class="versep"></div>
        <div class="tool-btn-group">
          <span class="glyphicon glyphicon-export"></span>
          <span class="glyphicon glyphicon-list"></span>
          <span class="glyphicon glyphicon-indent-right"></span>

          <span class="glyphicon glyphicon-camera"></span>
        </div>

        <div class="dsbrowse">
 
          <select class="selectpicker" data-live-search="true">
            <option>Alan Williams</option>
            <option>Albert Evans</option>
            <option>Albert Richardson</option>
           <option>Alexander Allen</option>
            <option>Alexander Bennett</option>
          </select>
        </div>

        <div class="settings toolbarglyph">
          <span class="glyphicon glyphicon-tasks"></span>
        </div>
      </div>


      <div class="settingscol col-md-3">
        <div class="side-panel">
          <div class="form-group left-align form-group-sm"><a...

CSS

body {
   margin: 20px;
 }
 
 .tab-pane {
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   height: 300px;
   overflow: hidden;
 }
 .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:hover,
 .nav-tabs>li.active>a:focus {
   background-color: #f1f1f1;
   font-weight: bold;
 }
 
 .nav-tabs>li>a {
   background-color: #c3d5e6;
 }
 
 .toolbar .glyphicon:not(.edit .glyphicon) {
   color: #999;
 }
 
 .toolbar .glyphicon:hover{
   color: #333;
   cursor: pointer;
 }
 
 .toolbarglyph:hover  {
   color: #333;
   cursor: pointer;
 }
 
 .toolbar {
   background-color: #f1f1f1;
   height: 30px;
   width: 100%;
   border-bottom: 1px solid #ddd;
   display: inline-block;
 }
 
 .viewedit {
   float: right;
   display: block;
   width: 150px;
   font-family:inherit;
 }
 
 .view,
 .edit {
   width: 75px;
   float: left;
   text-align: center;
   line-height: 27px;
   color: #999;
   font-weight: bold;
   display:block;
 }
 .toolbar .active .glyphicon{
   color: #333;
 }
 .viewedit .active{
   border-bottom: 2px solid #333;
   color: #333;
   font-weight: bold;
 }
 
 .view:hover,
 .edit:hover {
   border-bottom: 2px solid #666;
   color:#333;
 }
 
 .versep {
   width: 1px;
   height: 30px;
   background-color: #ddd;
   float: right;
 }
 
 .settings span {
   float: left;
   padding: 4px 7px 4px 7px;
 }
 
 .underline,
 .tool-btn-group span {
   float: right;
   padding: 6px 10px 5px 10px;
 }
 
 /*.dsbrowse {
   float: right;
   width: auto;
 }*/
 
 .bootstrap-select .btn {
   padding: 2px 12px!important;
   margin-top: 2px;
 }
 
 .btn-group.bootstrap-select {
   width: 100%;
   min-width: 580px;
    position: absolute;
    left: 55px;
}
 
 .settingscol {
   height: 100%;
   background-color: #E2E0E0;
   border-right: 1px solid #D4D4D4;
   margin-top: -6px;
   float: left;
 }
.side-panel,.cont-panel{
  padding:10px;
}
.side-panel a{color:#615959;font-weight:bold;}

.disabled{
	color: #000 !important;
	pointer-events:...

JavaScript

$('.settings').on('click', function() {

  $('.settingscol').toggleClass('col-0' 'col-md-3');
  $('.cont-panel').toggleClass('col-md-12' 'col-md-9');
});