Bootstrap Snippet tab section using HTML CSS Bootstrap

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 ---------->
<section class="services-sec">
              <div class="vertical-tab-menu">
              <nav>
                <div class="nav nav-tabs" id="myTab" role="tablist">
                  <a class="nav-item nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
                    <span><img src="assets/images/p_3.jpeg" alt="">
                    </span>
                    Kitchen
                  </a>
                  <a class="nav-item nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false" tabindex="-1">
                    <span><img src="assets/images/p_4.jpeg" alt="">
                
                    </span>
                    
                    Bathroom
                  </a>
                  <a class="nav-item nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false" tabindex="-1">
                    <span><img src="assets/images/p_5.jpeg" alt="">
                    </span>
                    Basement
                    
                  </a>
                  <a class="nav-item nav-link" id="nav-menu-tab" data-bs-toggle="tab" href="#nav-menu" role="tab" aria-controls="nav-menu" aria-selected="false" tabindex="-1">
                    <span><img src="assets/images/p_6.jpeg" alt="">
    
                    </span>
                    Interior
                   
                  </a>
                  <a class="nav-item nav-link" id="nav-menu2-tab" data-bs-toggle="tab" href="#nav-menu2" role="tab" aria-controls="nav-menu2" aria-selected="false" tabindex="-1">
                    <span><img src="assets/images/p_7.jpeg" alt="">
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
.services-sec {
    position: relative;
    background: #222;
    padding: 0;
}
.services-sec .nav-tabs {
    justify-content: center;
    border: 0;
}
.services-sec .nav-tabs a {
    border: 0 !important;
    position: relative;
    padding: 0;
    text-align: center;
    margin-right: 0px;
    font-size: 20px;
    color: #fff;
    margin: 0 !important;
    padding: 20px 0;
    border-radius: 0 !important;
    justify-content: center;
    background: rgb(93 103 123 / 75%) !important;
    border-bottom:1px solid rgba(0,0,0,0.2) !important;
    position: relative;
}
.arrow_box {
    position: relative;
    background: #c8a96a;
}
.services-sec .nav-tabs a.active:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"tab section"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"tab section" Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"tab section"
Bootstrap 4.1.1 Snippet by Shivamsemisetia