Tabs

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.

 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>

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.

 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>

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.

 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>

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.

 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.

 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 tabs-primary">
        <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.

 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 tabs-primary">
    <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.

 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 tabs-primary">
    <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.

 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 tabs-primary">
    <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>