Bootstrap Snippet Bootstrap Tabs Examples Horizontal and Vertical (Classical, Floating, Pills) using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="p-4">
<!--Classic Tabs Secton-->
<div class="classic-tab-wrap py-3">
    <div class="heading-tab">
        <h3>Horizontal - Classic Tabs</h3>
    </div>
    <div class="tab-wrap">
        <ul class="nav nav-tabs" id="classicTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="classic-1-tab" data-toggle="tab" href="#classic-1" role="tab"
                    aria-controls="classic-1" aria-selected="true"><i class="fa fa-thumbs-up"
                        aria-hidden="true"></i>First</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="classic-2-tab" data-toggle="tab" href="#classic-2" role="tab"
                    aria-controls="classic-2" aria-selected="false"><i class="fa fa-thumbs-up"
                        aria-hidden="true"></i>Second</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="classic-3-tab" data-toggle="tab" href="#classic-3" role="tab"
                    aria-controls="classic-3" aria-selected="false"><i class="fa fa-thumbs-up"
                        aria-hidden="true"></i>Third</a>
            </li>
        </ul>
        <div class="tab-content" id="classicTabContent">
            <div class="tab-pane fade show active" id="classic-1" role="tabpanel" aria-labelledby="classic-1-tab">
                classic Tab 1
            </div>
            <div class="tab-pane fade" id="classic-2" role="tabpanel" aria-labelledby="classic-2-tab">
                classic Tab 2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
/**Classic Tabs Wrap**/
.classic-tab-wrap .tab-wrap {
    padding: 20px;
    background: #f5f5f5;
}
.classic-tab-wrap .tab-wrap .nav-tabs li {
    margin: 0;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a {
    font-weight: 500;
    font-size: 18px;
    color: #8a8a8a;
    border: none;
    border-bottom: 2px solid transparent;
    padding-left: 35px;
    padding-right: 35px;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a.active {
    color: #495057;
    background: transparent;
    border-color: #495ab7;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a i {
    margin-right: 6px;
}
.classic-tab-wrap .tab-wrap .tab-pane {
    padding: 20px;
}
.viewBtn {
    padding-left: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Tabs Examples Horizontal and Vertical (Classical, Floating, Pills)"
Bootstrap 4.1.1 Snippet by abhimanyusankhyan4

Related: See More

Questions / Comments:

"Bootstrap Tabs Examples Horizontal and Vertical (Classical, Floating, Pills)" Bootstrap 4.1.1 Snippet by abhimanyusankhyan4

Related: See More

Questions / Comments:

"Bootstrap Tabs Examples Horizontal and Vertical (Classical, Floating, Pills)"
Bootstrap 4.1.1 Snippet by abhimanyusankhyan4