<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 ----------> <!-- 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 --> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> WEEK 1</a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> WEEK 2</a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> WEEK 3</a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> WEEK 4 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <p> WEEK 1 CONTENT </p> </div> <div class="tab-pane" id="tab_default_2"> <p> Howdy, I'm in Tagsdfgsdfgb 2. </p> </div> <div class="tab-pane" id="tab_default_3"> <p> Howdy, I'm in Tabsdfgsdfgsdfgsdfgsdf 3. </p> </div>

/*** 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: 0px;transition: all 2s ease; } .tab-content,.tab-pane{ transition-duration: 13s, 13s; transition-delay: 0s, 3s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out;} /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li { margin-right: 0px;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px;transition: all 2s ease;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.active { border-bottom: 4px solid #f3565d;transition: all 2s ease; position: relative;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333;transition: all 2s ease;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040;transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; transition-duration: 13s, 13s; transition-delay: 0s, 3s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; transition-duration: 13s, 13s; transition-delay: 0s, 13s; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } /* Below tabs mode */