"Bootstrap4 Card with Line-Tabs"
Bootstrap 4.0.0 Snippet by mdeuerlein

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.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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mt-3 tab-card">
<div class="card-header tab-card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">One</a>
</li>
<li class="nav-item">
<a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Three</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
<h5 class="card-title">Tab Card One</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
<h5 class="card-title">Tab Card Two</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab">
<h5 class="card-title">Tab Card Three</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
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
/***
Bootstrap4 Card with Tabs by @mdeuerlein
***/
body {
background-color: #f7f8f9;
}
.card {
background-color: #ffffff;
border: 1px solid rgba(0, 34, 51, 0.1);
box-shadow: 2px 4px 10px 0 rgba(0, 34, 51, 0.05), 2px 4px 10px 0 rgba(0, 34, 51, 0.05);
border-radius: 0.15rem;
}
/* Tabs Card */
.tab-card {
border:1px solid #eee;
}
.tab-card-header {
background:none;
}
/* Default mode */
.tab-card-header > .nav-tabs {
border: none;
margin: 0px;
}
.tab-card-header > .nav-tabs > li {
margin-right: 2px;
}
.tab-card-header > .nav-tabs > li > a {
border: 0;
border-bottom:2px solid transparent;
margin-right: 0;
color: #737373;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I like it a lot. The minimalist design is so gorgeous!

But, when you paste the code for the <head>. Using your order. Causing the following error in Google Chrome v85

util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined

at util.js:68

at util.js:10

at bootstrap.min.js:6

at bootstrap.min.js:6

To solve the error, you move jquery.min.js so it's above bootstrap.min.js

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Tcip () - 4 years ago - Reply 0


Thanks for that! Now I know how to make tabs. whenever I need them

miguelpt2018 () - 4 years ago - Reply 0