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!
Last modified 1yr ago
Copy link