console
<div class="demo">
<div class="container02">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="tab" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">
Section 1
</a>
</li>
<li role="presentation">
<a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">
Section 2
</a>
</li>
<li role="presentation">
<a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">
Section 3
</a>
</li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h3>
Section 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna
aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros
consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum
velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra
dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt,
imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>
Section 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna
aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros
consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum
velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra
dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt,
imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>
Section 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna
aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros
consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum
velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra
dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt,
imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
a {
color: #337ab7;
text-decoration: none
}
a:focus,
a:hover {
color: #23527c;
text-decoration: underline
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.container02 {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-right: -15px;
margin-left: -15px
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
.btn-group-vertical>.btn-group:after,
.btn-group-vertical>.btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container02-fluid:after,
.container02-fluid:before,
.container02:after,
.container02:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
display: table;
content: " "
}
.btn-group-vertical>.btn-group:after,
.btn-toolbar:after,
.clearfix:after,
.container02-fluid:after,
.container02:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.modal-header:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
clear: both
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.nav>li {
position: relative;
display: block
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px
}
.nav>li>a:focus,
.nav>li>a:hover {
text-decoration: none;
background-color: #eee
}
.nav>li.disabled>a {
color: #777
}
.nav>li.disabled>a:focus,
.nav>li.disabled>a:hover {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
background-color: #eee;
border-color: #337ab7
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5
}
.nav>li>a>img {
max-width: none
}
.nav-tabs {
border-bottom: 1px solid #ddd
}
.nav-tabs>li {
float: left;
margin-bottom: -1px
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-bottom-color: transparent
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0
}
.nav-tabs.nav-justified>li {
float: none
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 5px;
text-align: center
}
.nav-tabs.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto
}
@media (min-width:768px) {
.nav-tabs.nav-justified>li {
display: table-cell;
width: 1%
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 0
}
}
.nav-tabs.nav-justified>li>a {
margin-right: 0;
border-radius: 4px
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
border: 1px solid #ddd
}
@media (min-width:768px) {
.nav-tabs.nav-justified>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
border-bottom-color: #fff
}
}
.demo {
padding: 2em 0;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
.tab .nav-tabs {
position: relative;
border-bottom: none;
}
.tab .nav-tabs li {
text-align: center;
margin-right: 10px;
}
.tab .nav-tabs li a {
display: block;
font-size: 16px;
font-weight: 600;
color: #444;
padding: 10px 15px;
background: transparent;
margin-right: 0;
border: none;
border-radius: 0;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:before {
content: "";
width: 100%;
height: 3px;
background: #de7921;
position: absolute;
top: 92%;
left: 0;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before {
top: 0;
}
.tab .nav-tabs li a:after {
content: "";
width: 100%;
height: 100%;
background: #f4f4f4;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover:after,
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li.active a:hover:after {
top: 0;
}
.nav-tabs li.active a,
.nav-tabs li.active a:focus,
.nav-tabs li.active a:hover,
.nav-tabs li a:hover {
border: none;
}
.tab .tab-content {
padding: 30px 15px 20px;
background: #f4f4f4;
font-size: 14px;
color: #555;
line-height: 26px;
}
.tab .tab-content h3 {
font-size: 24px;
margin-top: 0;
}
@media only screen and (max-width: 479px) {
.tab .nav-tabs li {
width: 100%;
}
}
.tab-content>.tab-pane {
display: none
}
.tab-content>.active {
display: block
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.container02 h1,
.container02 h2,
.container02 h3,
.container02 h4,
.container02 h5,
.container02 h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit
}
.h1,
.h2,
.h3,
.container02 h1,
.container02 h2,
.container02 h3 {
margin-top: 20px;
margin-bottom: 10px
}
.h3,
.container02 h3 {
font-size: 24px
}
.container02 p {
margin: 0 0 10px
}