english
france
german
Element Tab
Home > Element Tab
Tab style 1
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-3">
<!-- Nav tabs -->
<div class="text-left">
<ul class="elements-tab-menu clearfix">
<li class="active"><a href="#home3" data-toggle="tab">Home</a></li>
<li><a href="#profile3" data-toggle="tab">Profile</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home3">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile3">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-4">
<!-- Nav tabs -->
<div class="text-right">
<ul class="elements-tab-menu clearfix">
<li class="active"><a href="#home4" data-toggle="tab">Home</a></li>
<li><a href="#profile4" data-toggle="tab">Profile</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home4">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile4">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Tab style 2
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-3">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home5">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile5">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
<!-- Nav tabs -->
<div class="text-left">
<ul class="elements-tab-menu clearfix">
<li class="active"><a href="#home5" data-toggle="tab">Home</a></li>
<li><a href="#profile5" data-toggle="tab">Profile</a></li>
</ul>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-4">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home6">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile6">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
<!-- Nav tabs -->
<div class="text-right">
<ul class="elements-tab-menu clearfix">
<li class="active"><a href="#home6" data-toggle="tab">Home</a></li>
<li><a href="#profile6" data-toggle="tab">Profile</a></li>
</ul>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Tab style 3
Popular
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
<div class="elements-tab-1">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>Popular</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<p>Profile</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Popular
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
<div class="elements-tab-2">
<!-- Nav tabs -->
<ul class="nav nav-tabs text-right" role="tablist">
<li role="presentation" class="active"><a href="#home2" aria-controls="home2" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home2">
<p>Popular</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile2">
<p>Profile</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
Tab style 4
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
Message
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-7">
<!-- Nav tabs -->
<div class="text-left">
<ul class="elements-tab-menu element-line-btm clearfix">
<li class="active"><a href="#home7" data-toggle="tab">Home</a></li>
<li><a href="#profile7" data-toggle="tab">Profile</a></li>
<li><a href="#message7" data-toggle="tab">Message</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home7">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile7">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
<div class="tab-pane" id="message7">
<p>Message</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
/*elements-tab-7*/
.elements-tab-7 .elements-tab-menu li {
margin: 0 20px 0 0;
}
.elements-tab-7 .elements-tab-menu li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
padding: 5px 0px;
}
.elements-tab-7 .elements-tab-menu li.active a {
color: #C8A165;
}
.element-line-btm li.active {
position: relative;
}
.element-line-btm li.active::before {
background: #d3b484 none repeat scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 40px;
}
.elements-tab-7 .element-line-btm li.active::before {
left: 0;
}
Home
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Profile
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
Message
Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.
<div class="elements-tab-8">
<!-- Nav tabs -->
<div class="text-right">
<ul class="elements-tab-menu element-line-btm clearfix">
<li class="active"><a href="#home8" data-toggle="tab">Home</a></li>
<li><a href="#profile8" data-toggle="tab">Profile</a></li>
<li><a href="#message8" data-toggle="tab">Message</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home8">
<p>Home</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div>
<div class="tab-pane" id="profile8">
<p>Profile</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
<div class="tab-pane" id="message8">
<p>Message</p>
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
</div>
</div>
</div>
.elements-tab .tab-content {
padding: 15px;
}
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
border: 1px solid #ddd;
border-top: 0;
}
.elements-tab .nav-tabs > li {
display: inline-block;
float: none;
}
.elements-tab .nav-tabs li a {
border-radius: 5px 5px 0 0;
font-size: 16px;
margin-right: 1px;
}
.elements-tab .nav-tabs li.active a {
color: #C8A165;
}
/* elements-tab-3 */
.elements-tab-menu {
display: inline-block;
}
.elements-tab-menu li {
display: block;
float: left;
margin: 0 2px;
}
.elements-tab-menu li a {
background: #ddd none repeat scroll 0 0;
display: block;
font-size: 16px;
padding: 10px 20px;
}
.elements-tab-menu li.active a {
background: #C8A165 none repeat scroll 0 0;
color: #fff;
}
/*elements-tab-8*/
.elements-tab-8 .elements-tab-menu li {
margin: 0 20px 0 0;
}
.elements-tab-8 .elements-tab-menu li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
padding: 5px 0px;
}
.elements-tab-8 .elements-tab-menu li.active a {
color: #C8A165;
}
.elements-tab-8 .element-line-btm li.active::before {
right: 0;
left: auto;
}
