"multiple tabs example"
Bootstrap 3.2.0 Snippet by yoatthemes

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Tab Example by Yoat themes</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"> Tab 1 </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Tab 2 </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Tab 3 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <p> I'm in Tab 1. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> <a class="btn btn-success" href="#" target="_blank"> Submit </a> </p> </div> <div class="tab-pane" id="tab_default_2"> <p> I'm in Tab 2. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> <a class="btn btn-warning" href="#" target="_blank"> Submit </a> </p> </div> <div class="tab-pane" id="tab_default_3"> <p> I'm in Tab 3. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> <a class="btn btn-info" href="#" target="_blank"> Submit </a> </p> </div> </div> </div> </div> </div> </div> </div>
/* 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


Questions / Comments: