Tabs

Tabs

Top

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#popular" data-toggle="tab"><i class="fa fa-star"></i>Popular</a>
        </li>
        <li><a href="#recent" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular" class="tab-pane active">
            <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 id="recent" class="tab-pane">
            <p>
                Recent</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>

Bottom

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs tabs-bottom">
    <div class="tab-content">
        <div id="popular13" class="tab-pane active">
            <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 id="recent13" class="tab-pane">
            <p>
                Recent</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>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#popular13" data-toggle="tab"><i class="fa fa-star"></i>
            Popular</a> </li>
        <li><a href="#recent13" data-toggle="tab">Recent</a> </li>
    </ul>
</div>

Justified

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#popular10" data-toggle="tab" class="text-center"><i
            class="fa fa-star"></i>Popular</a> </li>
        <li><a href="#recent10" data-toggle="tab" class="text-center">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular10" class="tab-pane active">
            <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 id="recent10" class="tab-pane">
            <p>
                Recent</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>

Vertical

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tabs tabs-vertical tabs-left">
    <ul class="nav nav-tabs col-sm-3">
        <li class="active"><a href="#popular11" data-toggle="tab">Popular</a> </li>
        <li><a href="#recent11" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular11" class="tab-pane active">
            <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 id="recent11" class="tab-pane">
            <p>
                Recent</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>

 

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs">
    <ul class="nav nav-tabs text-right">
        <li class="active"><a href="#popular7" data-toggle="tab"><i class="fa fa-star"></i>Popular</a>
        </li>
        <li><a href="#recent7" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular7" class="tab-pane active">
            <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 id="recent7" class="tab-pane">
            <p>
                Recent</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>

 

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs tabs-bottom">
    <div class="tab-content">
        <div id="popular14" class="tab-pane active">
            <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 id="recent14" class="tab-pane">
            <p>
                Recent</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>
    <ul class="nav nav-tabs nav-right">
        <li class="active"><a href="#popular14" data-toggle="tab"><i class="fa fa-star"></i>
            Popular</a> </li>
        <li><a href="#recent14" data-toggle="tab">Recent</a> </li>
    </ul>
</div>

 

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs tabs-bottom">
    <div class="tab-content">
        <div id="popular8" class="tab-pane active">
            <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 id="recent8" class="tab-pane">
            <p>
                Recent</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>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#popular8" data-toggle="tab" class="text-center"><i class="fa fa-star">
        </i>Popular</a> </li>
        <li><a href="#recent8" data-toggle="tab" class="text-center">Recent</a> </li>
    </ul>
</div>

 

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.

Recent

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.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tabs tabs-vertical tabs-right">
    <div class="tab-content">
        <div id="popular12" class="tab-pane active">
            <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 id="recent12" class="tab-pane">
            <p>
                Recent</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>
    <ul class="nav nav-tabs col-sm-3">
        <li class="active"><a href="#popular12" data-toggle="tab">Popular</a> </li>
        <li><a href="#recent12" data-toggle="tab">Recent</a> </li>
    </ul>
</div>