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
Card Group
Example 1
Source Code
1
<div class="card-group mb-8">
2
​
3
<!-- Card -->
4
<div class="card">
5
​
6
<!-- Card Image -->
7
<img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
8
<!-- /card image -->
9
​
10
<!-- Card Body -->
11
<div class="card-body">
12
​
13
<!-- Card Title-->
14
<h2 class="card-title">Card title</h2>
15
<!-- Card Title-->
16
​
17
<!-- Card Text-->
18
<p class="card-text">
19
This is a wider card with supporting text below as a natural lead-in to
20
additional content. This
21
content
22
is a little bit longer.
23
</p>
24
<!-- /card text-->
25
​
26
<!-- Card Text-->
27
<p class="card-text">
28
<small class="text-muted">Last updated 3 mins ago</small>
29
</p>
30
<!-- /card text-->
31
​
32
</div>
33
<!-- /card body -->
34
​
35
</div>
36
<!-- /card -->
37
​
38
<!-- Card -->
39
<div class="card">
40
​
41
<!-- Card Image -->
42
<img class="card-img-top" src="assets/images/card/plant.jpeg" alt="plant">
43
<!-- /card image -->
44
​
45
<!-- Card Body -->
46
<div class="card-body">
47
​
48
<!-- Card Title-->
49
<h2 class="card-title">Card title</h2>
50
<!-- Card Title-->
51
​
52
<!-- Card Text-->
53
<p class="card-text">
54
Some quick example text to build on the
55
card title and make up the bulk of the
56
card's content.
57
</p>
58
<!-- /card text-->
59
​
60
<!-- Card Text-->
61
<p class="card-text">
62
<small class="text-muted">Last updated 3 mins ago</small>
63
</p>
64
<!-- /card text-->
65
​
66
</div>
67
<!-- /card body -->
68
​
69
</div>
70
<!-- /card -->
71
​
72
<!-- Card -->
73
<div class="card">
74
​
75
<!-- Card Image -->
76
<img class="card-img-top" src="assets/images/card/coffee-cookies.jpeg" alt="Coffee">
77
<!-- /card image -->
78
​
79
<!-- Card Body -->
80
<div class="card-body">
81
​
82
<!-- Card Title-->
83
<h2 class="card-title">Card title</h2>
84
<!-- Card Title-->
85
​
86
<!-- Card Text-->
87
<p class="card-text">
88
This is a wider card with supporting text below as a natural lead-in to
89
additional content. This
90
card
91
has even longer content than the first to show that equal height action.
92
</p>
93
<!-- /card text-->
94
​
95
<!-- Card Text-->
96
<p class="card-text">
97
<small class="text-muted">Last updated 3 mins ago</small>
98
</p>
99
<!-- /card text-->
100
​
101
</div>
102
<!-- /card body -->
103
​
104
</div>
105
<!-- /card -->
106
​
107
</div>
Copied!
Example 2
Source Code
1
<div class="card-deck mb-8">
2
​
3
<!-- Card -->
4
<div class="card">
5
​
6
<!-- Card Image -->
7
<img class="card-img-top" src="assets/images/card/asphalt-balancing.jpeg" alt="Balancing">
8
<!-- /card image -->
9
​
10
<!-- Card Body -->
11
<div class="card-body">
12
​
13
<!-- Card Title-->
14
<h2 class="card-title">Card title</h2>
15
<!-- Card Title-->
16
​
17
<!-- Card Text-->
18
<p class="card-text">
19
This is a wider card with supporting text below as a natural lead-in to
20
additional content. This
21
content
22
is a little bit longer.
23
</p>
24
<!-- /card text-->
25
​
26
<!-- Card Text-->
27
<p class="card-text">
28
<small class="text-muted">Last updated 3 mins ago</small>
29
</p>
30
<!-- /card text-->
31
​
32
</div>
33
<!-- /card body -->
34
​
35
</div>
36
<!-- /card -->
37
​
38
<!-- Card -->
39
<div class="card">
40
​
41
<!-- Card Image -->
42
<img class="card-img-top" src="assets/images/card/sunset.jpeg" alt="sunset">
43
<!-- /card image -->
44
​
45
<!-- Card Body -->
46
<div class="card-body">
47
​
48
<!-- Card Title-->
49
<h2 class="card-title">Card title</h2>
50
<!-- Card Title-->
51
​
52
<!-- Card Text-->
53
<p class="card-text">
54
Some quick example text to build on the
55
card title and make up the bulk of the
56
card's content.
57
</p>
58
<!-- /card text-->
59
​
60
<!-- Card Text-->
61
<p class="card-text">
62
<small class="text-muted">Last updated 3 mins ago</small>
63
</p>
64
<!-- /card text-->
65
​
66
</div>
67
<!-- /card body -->
68
​
69
</div>
70
<!-- /card -->
71
​
72
<!-- Card -->
73
<div class="card">
74
​
75
<!-- Card Image -->
76
<img class="card-img-top" src="assets/images/card/person-walking.jpeg" alt="Person">
77
<!-- /card image -->
78
​
79
<!-- Card Body -->
80
<div class="card-body">
81
​
82
<!-- Card Title-->
83
<h2 class="card-title">Card title</h2>
84
<!-- Card Title-->
85
​
86
<!-- Card Text-->
87
<p class="card-text">
88
This is a wider card with supporting text below as a natural lead-in to
89
additional content. This
90
card
91
has even longer content than the first to show that equal height action.
92
</p>
93
<!-- /card text-->
94
​
95
<!-- Card Text-->
96
<p class="card-text">
97
<small class="text-muted">Last updated 3 mins ago</small>
98
</p>
99
<!-- /card text-->
100
​
101
</div>
102
<!-- /card body -->
103
​
104
</div>
105
<!-- /card -->
106
​
107
</div>
Copied!
Example 3
Source Code
1
<div class="card-columns">
2
​
3
<!-- Card -->
4
<div class="card">
5
​
6
<!-- Card Image -->
7
<img class="card-img-top" src="assets/images/card/painted-hand.jpeg" alt="Hand">
8
<!-- /card image -->
9
​
10
<!-- Card Body -->
11
<div class="card-body">
12
<h2 class="card-title">Card title that wraps to a new line</h2>
13
<p class="card-text">This is a longer card with supporting text below as a
14
natural lead-in to
15
additional
16
content. This content is a little bit longer.</p>
17
</div>
18
<!-- /card body -->
19
​
20
</div>
21
<!-- /card -->
22
​
23
<!-- Card -->
24
<div class="card">
25
​
26
<!-- Blockquote -->
27
<blockquote class="blockquote mb-0 card-body">
28
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
29
a ante.</p>
30
<footer class="blockquote-footer">
31
<small class="text-muted">
32
Someone famous in <cite title="Source Title">Source Title</cite>
33
</small>
34
</footer>
35
</blockquote>
36
<!-- /blockquote -->
37
​
38
</div>
39
<!-- /card -->
40
​
41
<!-- Card -->
42
<div class="card">
43
​
44
<!-- Card Image -->
45
<img class="card-img-top" src="assets/images/card/bottle.jpeg" alt="Bottle">
46
<!-- /card image -->
47
​
48
<div class="card-body">
49
<h2 class="card-title">Card title</h2>
50
<p class="card-text">This card has supporting text below as a natural lead-in to
51
additional
52
content.</p>
53
<p class="card-text">
54
<small class="text-muted">Last updated 3 mins ago</small>
55
</p>
56
</div>
57
</div>
58
<!-- /card -->
59
​
60
<!-- Card -->
61
<div class="card bg-primary text-center">
62
​
63
<!-- Card Body -->
64
<blockquote class="blockquote mb-0 text-white card-body">
65
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
66
erat.</p>
67
<footer class="blockquote-footer text-white">
68
<small>
69
Someone famous in <cite title="Source Title">Source Title</cite>
70
</small>
71
</footer>
72
</blockquote>
73
<!-- /card body -->
74
​
75
</div>
76
<!-- /card -->
77
​
78
<!-- Card -->
79
<div class="card text-center">
80
​
81
<!-- Card Body -->
82
<div class="card-body">
83
<h2 class="card-title">Card title</h2>
84
<p class="card-text">This card has supporting text below as a natural lead-in to
85
additional
86
content.</p>
87
<p class="card-text">
88
<small class="text-muted">Last updated 3 mins ago</small>
89
</p>
90
</div>
91
<!-- /card body -->
92
​
93
</div>
94
<!-- /card -->
95
​
96
<!-- Card -->
97
<div class="card">
98
​
99
<!-- Card Image -->
100
<img class="card-img" src="assets/images/card/doughnut.jpeg" alt="Doughnut">
101
<!-- /card image -->
102
​
103
</div>
104
<!-- /card -->
105
​
106
<!-- Card -->
107
<div class="card text-right">
108
​
109
<!-- Card Body -->
110
<blockquote class="blockquote mb-0 card-body">
111
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
112
a ante.</p>
113
<footer class="blockquote-footer">
114
<small class="text-muted">
115
Someone famous in <cite title="Source Title">Source Title</cite>
116
</small>
117
</footer>
118
</blockquote>
119
<!-- /card body -->
120
​
121
</div>
122
<!-- /card -->
123
​
124
<!-- Card -->
125
<div class="card">
126
​
127
<!-- Card Body -->
128
<div class="card-body">
129
<h2 class="card-title">Card title</h2>
130
<p class="card-text">This is a wider card with supporting text below as a
131
natural lead-in to
132
additional
133
content. This card has even longer content than the first to show that equal
134
height action.</p>
135
<p class="card-text">
136
<small class="text-muted">Last updated 3 mins ago</small>
137
</p>
138
</div>
139
<!-- /card body -->
140
​
141
</div>
142
<!-- /card -->
143
​
144
</div>
Copied!
Components - Previous
Cards
Next - Components
Collapse
Last modified 1yr ago
Copy link