Drift BootStrap 4, HTML, jQuery
Search…
Drift BootStrap 4, HTML, jQuery
Overview
Installation and Setup
Setup
Folders and Files Structure
Stylesheets
Overview
Sass Variables
Layouts & Theme
Fonts
Colors
Margin & Paddings
Theme Customization
RTL Version
Components
Alerts
Badges
Breadcrumbs
Buttons
Button Group
Cards
Card Group
Collapse
Dropdowns
Input Group
Jumbotron
List Group
Navbar
Navs & Tabs
Pagination
Progress Bar
Scrollspy
Typography
Classic Version
Setup
Folders and Files Structure
Theme Customizaton
RTL Version
Powered By GitBook
Cards
Example 1
Source Code
1
<div class="card">
2
​
3
<!-- Card Image -->
4
<img class="card-img-top" src="assets/images/card/skateboard.jpeg" alt="Skateboard">
5
<!-- /card image -->
6
​
7
<!-- Card Body -->
8
<div class="card-body">
9
​
10
<!-- Card Title-->
11
<h2 class="card-title">Card title</h2>
12
<!-- Card Title-->
13
​
14
<!-- Card Text-->
15
<p class="card-text">
16
Some quick example text to build on the card title and make up the bulk of the
17
card's content.
18
</p>
19
<!-- /card text-->
20
​
21
<!-- Card Button-->
22
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
23
<!-- /card button-->
24
​
25
</div>
26
<!-- /card body -->
27
​
28
</div>
Copied!
Example 2
Source Code
1
<div class="card">
2
​
3
<!-- Card Body -->
4
<div class="card-body">
5
​
6
<!-- Card Text-->
7
<p class="card-text">
8
This is some text within a card body. Use it wisely :)
9
</p>
10
<!-- /card text-->
11
​
12
</div>
13
<!-- /card body -->
14
​
15
</div>
Copied!
Example 3
Source Code
1
<div class="card">
2
​
3
<!-- Card Body -->
4
<div class="card-body">
5
​
6
<!-- Card Title-->
7
<h2 class="card-title">Titles &amp; Links</h2>
8
<!-- Card Title-->
9
​
10
<!-- Card Sub Title-->
11
<h4 class="card-subtitle">Subtitle text</h4>
12
<!-- /card sub title-->
13
​
14
<!-- Card Text-->
15
<p class="card-text">
16
Some quick example text to build on the card title and make up the bulk of the
17
card's content.
18
</p>
19
<!-- /card text-->
20
​
21
<!-- Card Link-->
22
<a href="javascript:void(0)" class="card-link">Goto Link</a>
23
<a href="javascript:void(0)" class="card-link">Another Link</a>
24
<!-- /card link-->
25
​
26
</div>
27
<!-- /card body -->
28
​
29
</div>
Copied!
Example 4
Source Code
1
<div class="card">
2
​
3
<!-- Card Image -->
4
<img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
5
<!-- /card image -->
6
​
7
<!-- Card Body -->
8
<div class="card-body">
9
​
10
<!-- Card Title-->
11
<h2 class="card-title">Kitchen Sink</h2>
12
<!-- Card Title-->
13
​
14
<!-- Card Text-->
15
<p class="card-text lead">
16
Mix and match multiple content types...
17
</p>
18
​
19
</div>
20
<!-- /card body -->
21
​
22
<!-- List Group -->
23
<ul class="list-group list-group-flush">
24
<li class="list-group-item">Cras justo odio</li>
25
<li class="list-group-item">Dapibus ac facilisis in</li>
26
</ul>
27
<!-- /list group-->
28
​
29
<!-- Card Body -->
30
<div class="card-body">
31
​
32
<!-- Card Button-->
33
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
34
<a href="javascript:void(0)" class="card-link">Card Link</a>
35
<!-- /card button-->
36
​
37
</div>
38
<!-- /card body -->
39
​
40
</div>
Copied!
Example 5
Source Code
1
<div class="card">
2
​
3
<!-- Card header -->
4
<div class="card-header">
5
<ul class=" card-header-pills nav nav-pills" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#tab-pane3" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" data-toggle="tab" href="#tab-pane4" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
11
</li>
12
<li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
13
</ul>
14
</div>
15
<!-- /card header -->
16
​
17
<!-- Tab Content-->
18
<div class="tab-content">
19
​
20
<!-- Tab panel -->
21
<div id="tab-pane3" class="tab-pane active">
22
​
23
<!-- Card Body -->
24
<div class="card-body">
25
​
26
<!-- Card Title-->
27
<h2 class="card-title">Tabs In Button Style</h2>
28
<!-- Card Title-->
29
​
30
<!-- Card Text-->
31
<p class="card-text">
32
Mix and match multiple content types to create the card you need, or
33
throw everything in there.
34
</p>
35
<!-- /card text-->
36
​
37
<!-- Card Link-->
38
<a href="javascript:void(0)" class="card-link">Goto Link</a>
39
<!-- /card link-->
40
​
41
</div>
42
<!-- /card body -->
43
​
44
</div>
45
<!-- /tab panel -->
46
​
47
<!-- Tab panel -->
48
<div id="tab-pane4" class="tab-pane">
49
​
50
<!-- Card Body -->
51
<div class="card-body">
52
​
53
<!-- Card Title-->
54
<h2 class="card-title">Tabs In Button Style</h2>
55
<!-- Card Title-->
56
​
57
<!-- Card Text-->
58
<p class="card-text">
59
Some quick example text to build on the card title and make up the bulk
60
of the card's content.
61
</p>
62
<!-- /card text-->
63
​
64
<!-- Card Link-->
65
<a href="javascript:void(0)" class="card-link">Goto Link</a>
66
<!-- /card link-->
67
​
68
</div>
69
<!-- /card body -->
70
​
71
</div>
72
<!-- /tab panel -->
73
​
74
<!-- Tab panel -->
75
<div class="tab-pane">
76
​
77
<!-- Card Body -->
78
<div class="card-body">
79
​
80
<!-- Card Title-->
81
<h2 class="card-title">Tabs In Button Style</h2>
82
<!-- Card Title-->
83
​
84
<!-- Card Text-->
85
<p class="card-text">
86
Some quick example text to build on the card title and make up the bulk
87
of the card's content.
88
</p>
89
<!-- /card text-->
90
​
91
<!-- Card Link-->
92
<a href="javascript:void(0)" class="card-link">Goto Link</a>
93
<!-- /card link-->
94
​
95
</div>
96
<!-- /card body -->
97
​
98
</div>
99
<!-- /tab panel -->
100
​
101
</div>
102
<!-- /tab content-->
103
​
104
</div>
Copied!
Example 6
Source Code
1
<div class="card">
2
​
3
<!-- Card header -->
4
<div class="card-header card-nav">
5
<ul class="card-header-tabs nav nav-tabs" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#tab-pane1" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" data-toggle="tab" href="#tab-pane2" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
11
</li>
12
<li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
13
</ul>
14
</div>
15
<!-- /card header -->
16
​
17
<!-- Tab Content-->
18
<div class="tab-content">
19
​
20
<!-- Tab panel -->
21
<div id="tab-pane1" class="tab-pane active">
22
​
23
<!-- Card Body -->
24
<div class="card-body">
25
​
26
<!-- Card Title-->
27
<h2 class="card-title">Card With Tabs</h2>
28
<!-- Card Title-->
29
​
30
<!-- Card Text-->
31
<p class="card-text">
32
Some quick example text to build on the card title and make up the bulk
33
of the card's content.
34
</p>
35
<!-- /card text-->
36
​
37
<!-- Card Link-->
38
<a href="javascript:void(0)" class="card-link">Goto Link</a>
39
<!-- /card link-->
40
​
41
</div>
42
<!-- /card body -->
43
​
44
</div>
45
<!-- /tab panel -->
46
​
47
<!-- Tab panel -->
48
<div id="tab-pane2" class="tab-pane">
49
​
50
<!-- Card Body -->
51
<div class="card-body">
52
​
53
<!-- Card Title-->
54
<h2 class="card-title">Card With Tabs</h2>
55
<!-- Card Title-->
56
​
57
<!-- Card Text-->
58
<p class="card-text">
59
Mix and match multiple content types to create the card you need, or
60
throw everything in there.
61
</p>
62
<!-- /card text-->
63
​
64
<!-- Card Link-->
65
<a href="javascript:void(0)" class="card-link">Goto Link</a>
66
<!-- /card link-->
67
​
68
</div>
69
<!-- /card body -->
70
​
71
</div>
72
<!-- /tab panel -->
73
​
74
<!-- Tab panel -->
75
<div class="tab-pane">
76
​
77
<!-- Card Body -->
78
<div class="card-body">
79
​
80
<!-- Card Title-->
81
<h2 class="card-title">Card With Tabs</h2>
82
<!-- Card Title-->
83
​
84
<!-- Card Text-->
85
<p class="card-text">
86
Some quick example text to build on the card title and make up the bulk
87
of the card's content.
88
</p>
89
<!-- /card text-->
90
​
91
<!-- Card Link-->
92
<a href="javascript:void(0)" class="card-link">Goto Link</a>
93
<!-- /card link-->
94
​
95
</div>
96
<!-- /card body -->
97
​
98
</div>
99
<!-- /tab panel -->
100
​
101
</div>
102
<!-- /tab content-->
103
​
104
</div>
Copied!
Example 7
Source Code
1
<div class="card text-white">
2
​
3
<!-- Card Image -->
4
<img class="card-img" src="assets/images/card/person-walking.jpeg" alt="Person">
5
<!-- /card image -->
6
​
7
<!-- Card Overlay -->
8
<div class="card-img-overlay">
9
​
10
<!-- Card Header -->
11
<h2 class="card-title text-white">Card title</h2>
12
<!-- /card header -->
13
​
14
<!-- Card Text -->
15
<p class="card-text">
16
This is a wider card with supporting text below as a natural lead-in to
17
additional content. This content is a little bit longer.
18
</p>
19
<p class="card-text">Last updated 3 mins ago</p>
20
<!-- /card text -->
21
​
22
</div>
23
<!-- /card overlay -->
24
​
25
</div>
Copied!
Example 8
Source Code
1
<div class="card text-white bg-primary">
2
​
3
<!-- Card Header -->
4
<h4 class="card-header text-white">Header</h4>
5
<!-- /card header -->
6
​
7
<!-- Card Body -->
8
<div class="card-body">
9
​
10
<!-- Card Title-->
11
<h2 class="card-title text-white">Header &amp; Footer</h2>
12
<!-- Card Title-->
13
​
14
<!-- Card Text-->
15
<p class="card-text">
16
Some quick example text to build on the card title and make up the bulk of the
17
card's content.
18
</p>
19
<!-- /card text-->
20
​
21
</div>
22
<!-- /card body -->
23
​
24
<!-- Card Footer -->
25
<div class="card-footer">2 days ago | footer content</div>
26
<!-- /card footer -->
27
​
28
</div>
Copied!
Components - Previous
Button Group
Next - Components
Card Group
Last modified 1yr ago
Copy link