"Bootstrap 4 tabs"
Bootstrap 4.1.1 Snippet by kanikamadaan

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 ---------->
<section id="tabs" class="coE-tab">
<div class="container">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="tab-1" data-toggle="tab" href="#tab1" role="tab"
aria-controls="tab1" aria-selected="true">DEBTOR</a>
<a class="nav-item nav-link" id="tab-2" data-toggle="tab" href="#tab2" role="tab"
aria-controls="tab2" aria-selected="false">CO-DEBTOR</a>
</div>
</nav>
<div class="card">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab-1">
<h5 class="font-weight-bold text-core-green f-900 pb-15 mb-0">Tab 1
</h5>
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue id
augue ac aliquam. Aliquam erat volutpat. Phasellus et ultrices ante.
Cras ornare risus lacus, sollicitudin tempor magna ultrices ut. Cras
mollis finibus cursus. Aenean aliquet sed diam ut venenatis. Duis
scelerisque suscipit blandit. Donec ultricies bibendum nisi vitae
luctus. Cras venenatis magna at mauris fringilla, tempus dapibus ligula
ornare.
</p>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab-2">
<h5>Tab 2</h5>
<p class="mb-0">
Mauris metus mi, commodo vitae sapien id, vehicula dignissim arcu. In dictum
fringilla dui vitae pulvinar. Phasellus nisi lacus, dictum non efficitur vitae,
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
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important;
font-size: 14px;
color: #4e4e4e;
}
.coE-tab nav {
width: 100%;
background-color: #f5f5f5;
border: 0px solid #eee;
margin: 10px 0px;
}
.coE-tab .nav-link {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
color: #003b4d;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.coE-tab .nav-tabs {
border-bottom: 0px solid #dee2e6;
}
.coE-tab .nav-tabs .nav-link:focus,
.coE-tab .nav-tabs .nav-link:hover {
border-color: transparent;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Tabs style 1
Bootstrap Tabs with Table
Tabs

Questions / Comments: