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;
    }