"Statutory Disclosures"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Tabs -->
<section id="tabs">
<div class="container">
<h6 class="section-title h1">Statutory Disclosures</h6>
<div class="row">
<div class="col-xs-12 ">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-policies-tab" data-toggle="tab" href="#nav-policies" role="tab" aria-controls="nav-policies" aria-selected="true">Policies</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">CSR Activities </a>
<a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">Others</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-policies" role="tabpanel" aria-labelledby="nav-policies-tab">
<div class="row">
<h2 class="text-center">Services Blocks</h2>
<div class="row">
<div class="col-md-4 text-center">
<div class="box">
<div class="box-content">
<h1 class="tag-title">Business continuity policy</h1>
<hr />
<p>The company shall establish, implement and maintain a holistic and robust Business Continuity Management System (BCMS).</p>
<br />
<a href="indior.tours" class="btn btn-block btn-primary">Read more...</a>
</div>
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
.nav{
background-color: #203989;
padding: 25px;
}
.nav-tabs {
border-bottom: none !important;
}
#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #203989 !important;
background-color: #a4d6ef !important;
border-color: transparent transparent #f3f3f3;
}
#tabs .nav-tabs .nav-link {
border: 1px solid transparent;
color: #eee;
font-size: 20px;
background-color: #203989;
border: 1px solid #a4d6ef;
color: #a4d6ef;
}
.nav-item {
border-radius: 0 !important;
}
.nav-item:last-child {
border-top-right-radius: .5rem !important;
border-bottom-right-radius: .5rem !important;
}
.nav-item:first-child {
border-top-left-radius: .5rem !important;
border-bottom-left-radius: .5rem !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System

Questions / Comments: