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="nav-item active">
			<a class="nav-link" href="#popular" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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">
	<ul class="nav nav-tabs justify-content-end tabs-primary">
		<li class="nav-item active">
			<a class="nav-link" href="#popular7" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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">
    <ul class="nav nav-tabs nav-justified flex-column flex-md-row">
        <li class="nav-item active">
            <a href="#popular10" data-toggle="tab" class="text-center nav-link"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a href="#recent10" data-toggle="tab" class="text-center nav-link">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

<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 flex-column flex-md-row">
        <li class="nav-item active">
            <a href="#popular8" data-toggle="tab" class="text-center nav-link"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a href="#recent8" data-toggle="tab" class="text-center nav-link">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-left">
	<ul class="nav nav-tabs col-sm-3">
		<li class="nav-item active">
			<a class="nav-link" href="#popular11" data-toggle="tab">Popular</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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-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="nav-item active">
			<a class="nav-link" href="#popular12" data-toggle="tab">Popular</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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-center">
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item active">
            <a class="nav-link" href="#popular15" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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-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 justify-content-center">
        <li class="nav-item active">
            <a class="nav-link" href="#popular16" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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-primary">
    <ul class="nav nav-tabs">
        <li class="nav-item active">
            <a class="nav-link" href="#popularColors1" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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-secondary">
    <ul class="nav nav-tabs">
        <li class="nav-item active">
            <a class="nav-link" data-toggle="tab" href="#popularColors2"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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-tertiary">
    <ul class="nav nav-tabs">
        <li class="nav-item active">
            <a class="nav-link" href="#popularColors3" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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 tabs-quaternary">
    <ul class="nav nav-tabs">
        <li class="nav-item active">
            <a class="nav-link" href="#popularColors4" data-toggle="tab"><em class="fas fa-star"></em> Popular</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" 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-simple">
	<ul class="nav nav-tabs justify-content-center">
		<li class="nav-item active">
			<a class="nav-link" href="#tabsNavigationSimple1" data-toggle="tab">Customer Support</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#tabsNavigationSimple2" data-toggle="tab">HTML5 / CSS3 / JS</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#tabsNavigationSimple3" data-toggle="tab">500+ Google Fonts</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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-simple">
	<ul class="nav nav-tabs justify-content-center center">
		<li class="nav-item active">
			<a class="nav-link" 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 fas fa-user"></em>
						</span>
					</div>
				</div>
				<p class="mb-none pb-none">Customer Support</p>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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 fas fa-file"></em>
						</span>
					</div>
				</div>
				<p class="mb-none pb-none">HTML5 / CSS3 / JS</p>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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 fab fa-google-plus-g"></em>
						</span>
					</div>
				</div>
				<p class="mb-none pb-none">500+ Google Fonts</p>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" 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 fas 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="nav-item active">
                    <a href="#tabsNavigation1" data-toggle="tab"><em class="fas fa-users"></em> Customer Support</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tabsNavigation2" data-toggle="tab"><em class="fas fa-file"></em> HTML5 / CSS3 / JS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tabsNavigation3" data-toggle="tab"><em class="fab fa-google-plus-g"></em> 500+ Google Fonts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tabsNavigation4" data-toggle="tab"><em class="fas fa-adjust"></em> Colors</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tabsNavigation5" data-toggle="tab"><em class="fas fa-film"></em> Sliders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tabsNavigation6" data-toggle="tab"><em class="fas 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="device" class="pull-right" width="200" src="/portals/22/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="device" class="pull-left" width="200" src="/portals/22/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>