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>

 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>

 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>

 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>

 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>

 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>

 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>

 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>