Tabs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="tabs">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popular" data-toggle="tab"><em class="fa fa-star"></em> 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

<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"><em class="fa fa-star"></em> 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

<div class="tabs tabs-center">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popular15" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recent15" data-toggle="tab">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="popular15" 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="recent15" 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

<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

<div class="tabs tabs-center">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popular15" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recent15" data-toggle="tab">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="popular15" 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="recent15" 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

<div class="tabs tabs-primary">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popularColors1" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recentColors1" data-toggle="tab">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="popularColors1" 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="recentColors1" 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

<div class="tabs tabs-tertiary">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popularColors3" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recentColors3" data-toggle="tab">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="popularColors3" 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="recentColors3" 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

<div class="tabs">
    <ul class="nav nav-tabs text-right tabs-primary">
        <li class="active">
            <a href="#popular7" data-toggle="tab"><em class="fa fa-star"></em> 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

<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"><em class="fa fa-star"></em> 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

<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"><em class="fa fa-star"></em> 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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="tabs tabs-bottom tabs-center">
    <div class="tab-content">
        <div id="popular16" 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="recent16" 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="#popular16" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recent16" 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

<div class="tabs tabs-secondary">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#popularColors2"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a data-toggle="tab" href="#recentColors2">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="popularColors2">
            <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 class="tab-pane" id="recentColors2">
            <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

<div class="tabs tabs-quaternary">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#popularColors4" data-toggle="tab"><em class="fa fa-star"></em> Popular</a>
        </li>
        <li>
            <a href="#recentColors4" data-toggle="tab">Recent</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="popularColors4" 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="recentColors4" 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<div class="tabs tabs-bottom tabs-center tabs-simple">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tabsNavigationSimple1" data-toggle="tab">Customer Support</a>
        </li>
        <li>
            <a href="#tabsNavigationSimple2" data-toggle="tab">HTML5 / CSS3 / JS</a>
        </li>
        <li>
            <a href="#tabsNavigationSimple3" data-toggle="tab">500+ Google Fonts</a>
        </li>
        <li>
            <a href="#tabsNavigationSimple4" data-toggle="tab">Colors</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tabsNavigationSimple1">
            <div class="center">
                <h4>Customer Support</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimple2">
            <div class="center">
                <h4>HTML5 / CSS3 / JS</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimple3">
            <div class="center">
                <h4>500+ Google Fonts</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimple4">
            <div class="center">
                <h4>Colors</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<div class="tabs tabs-bottom tabs-center tabs-simple">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tabsNavigationSimpleIcons1" data-toggle="tab">
                <div class="featured-boxes featured-boxes-style-6 p-none m-none">
                    <div class="featured-box featured-box-primary featured-box-effect-6 p-none m-none">
                        <span class="box-content p-none m-none">
                            <em class="icon-featured fa fa-user"></em>
                        </span>
                    </div>
                </div>
                <p class="mb-none pb-none">Customer Support</p>
            </a>
        </li>
        <li>
            <a href="#tabsNavigationSimpleIcons2" data-toggle="tab">
                <div class="featured-boxes featured-boxes-style-6 p-none m-none">
                    <div class="featured-box featured-box-primary featured-box-effect-6 p-none m-none">
                        <span class="box-content p-none m-none">
                            <em class="icon-featured fa fa-file"></em>
                        </span>
                    </div>
                </div>
                <p class="mb-none pb-none">HTML5 / CSS3 / JS</p>
            </a>
        </li>
        <li>
            <a href="#tabsNavigationSimpleIcons3" data-toggle="tab">
                <div class="featured-boxes featured-boxes-style-6 p-none m-none">
                    <div class="featured-box featured-box-primary featured-box-effect-6 p-none m-none">
                        <span class="box-content p-none m-none">
                            <em class="icon-featured fa fa-google-plus"></em>
                        </span>
                    </div>
                </div>
                <p class="mb-none pb-none">500+ Google Fonts</p>
            </a>
        </li>
        <li>
            <a href="#tabsNavigationSimpleIcons4" data-toggle="tab">
                <div class="featured-boxes featured-boxes-style-6 p-none m-none">
                    <div class="featured-box featured-box-primary featured-box-effect-6 p-none m-none">
                        <span class="box-content p-none m-none">
                            <em class="icon-featured fa fa-adjust"></em>
                        </span>
                    </div>
                </div>
                <p class="mb-none pb-none">Colors</p>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tabsNavigationSimpleIcons1">
            <div class="center">
                <h4>Customer Support</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimpleIcons2">
            <div class="center">
                <h4>HTML5 / CSS3 / JS</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimpleIcons3">
            <div class="center">
                <h4>500+ Google Fonts</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </div>
        <div class="tab-pane" id="tabsNavigationSimpleIcons4">
            <div class="center">
                <h4>Colors</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
                <p>Lorem ipsum dolor sit amet. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
            </div>
        </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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<div class="row">
    <div class="col-md-4">
        <div class="tabs tabs-vertical tabs-left tabs-navigation">
            <ul class="nav nav-tabs col-sm-3">
                <li class="active">
                    <a href="#tabsNavigation1" data-toggle="tab"><em class="fa fa-group"></em> Customer Support</a>
                </li>
                <li>
                    <a href="#tabsNavigation2" data-toggle="tab"><em class="fa fa-file"></em> HTML5 / CSS3 / JS</a>
                </li>
                <li>
                    <a href="#tabsNavigation3" data-toggle="tab"><em class="fa fa-google-plus"></em> 500+ Google Fonts</a>
                </li>
                <li>
                    <a href="#tabsNavigation4" data-toggle="tab"><em class="fa fa-adjust"></em> Colors</a>
                </li>
                <li>
                    <a href="#tabsNavigation5" data-toggle="tab"><em class="fa fa-film"></em> Sliders</a>
                </li>
                <li>
                    <a href="#tabsNavigation6" data-toggle="tab"><em class="fa fa-user"></em> Icons</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-8">
        <div class="tab-pane tab-pane-navigation active" id="tabsNavigation1">
            <h4>Customer Support</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <img alt="" class="pull-right" width="200" src="/portals/2/img/device.png" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
        <div class="tab-pane tab-pane-navigation" id="tabsNavigation2">
            <h4>HTML5 / CSS3 / JS</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
        <div class="tab-pane tab-pane-navigation" id="tabsNavigation3">
            <h4>500+ Google Fonts</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <img alt="" class="pull-left" width="200" src="/portals/2/img/device.png" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
        <div class="tab-pane tab-pane-navigation" id="tabsNavigation4">
            <h4>Colors</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
        <div class="tab-pane tab-pane-navigation" id="tabsNavigation5">
            <h4>Sliders</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
        <div class="tab-pane tab-pane-navigation" id="tabsNavigation6">
            <h4>Icons</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        </div>
    </div>
</div>