"Bootstrap Line Tabs by KeenThemes"
Bootstrap 3.2.0 Snippet by petrb

Post to Facebook Tweet this

<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 ----------> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class="col-md-8"> <h3>Full task + client</h3> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Preview </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Client </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Tasks <span class="label label-success text-success">2</span> </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Jobs </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Invoices </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Estimates </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Contracts </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Payments <i class="fa fa-bell-o text-alert" style="color:orange;"></i></a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1" style="height: 5px"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <h3>Task without client</h3> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Task </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Client <i class="fa fa-user-plus" style="color:#999"></i></a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1" style="height: 400px"> </div> </div> </div> </div> </div> </div> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>
/*** Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ /* Tabs panel */ .tabbable-panel { border:1px solid #eee; padding: 10px; } /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px; } .tabbable-line > .nav-tabs > li { margin-right: 2px; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px; } .tabbable-line > .nav-tabs > li.active { border-bottom: 4px solid #f3565d; position: relative; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; } /* Below tabs mode */ .tabbable-line.tabs-below > .nav-tabs > li { border-top: 4px solid transparent; } .tabbable-line.tabs-below > .nav-tabs > li > a { margin-top: 0; } .tabbable-line.tabs-below > .nav-tabs > li:hover { border-bottom: 0; border-top: 4px solid #fbcdcf; } .tabbable-line.tabs-below > .nav-tabs > li.active { margin-bottom: -2px; border-bottom: 0; border-top: 4px solid #f3565d; } .tabbable-line.tabs-below > .tab-content { margin-top: -10px; border-top: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; }

Related: See More

Vue Material Kit
Form - Line
Tabs style 1
Bootstrap Tabs with Table

Questions / Comments: