​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<!-- Latest compiled and minified Bootstrap CSS -->
5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
6
​
7
<style>
8
body {
9
padding-top: 1em;
10
}
11
</style> <div class="container-fluid">
12
13
<div class="card-columns">
14
​
15
<!-- Card 1 -->
16
<div class="card">
17
<div class="card-header">Card 1</div>
18
<div class="card-body">
19
<p class="card-text">Text for this card.</p>
20
</div>
21
</div>
22
​
23
<!-- Card 2 -->
24
<div class="card">
25
<div class="card-body">
26
<h4 class="card-title">Card 2</h4>
27
<p class="card-text">Text for this card.</p>
28
</div>
29
</div>
30
​
31
<!-- Card 3 -->
32
<div class="card">
33
<div class="card-header">Card 3</div>
34
<div class="card-body">
35
<p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
36
</div>
37
<div class="card-footer">Footer</div>
38
</div>
39
​
40
<!-- Card 4 -->
41
<div class="card">
42
<div class="card-header">Card 4</div>
43
<div class="card-body">
44
<p class="card-text">Text for this card.</p>
45
</div>
46
<div class="card-footer">Footer</div>
47
</div>
48
​
49
<!-- Card 5 -->
50
<div class="card">
51
<div class="card-body">
52
<h4 class="card-title">Card 5</h4>
53
<p class="card-text">Text for this card.</p>
54
</div>
55
</div>
56
​
57
<!-- Card 6 -->
58
<div class="card">
59
<div class="card-header">Card 6</div>
60
<div class="card-body">
61
<p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
62
</div>
63
</div>
64
​
65
<!-- Card 7 -->
66
<div class="card">
67
<div class="card-header">Card 7</div>
68
<div class="card-body">
69
<p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
70
</div>
71
<div class="card-footer">Footer</div>
72
</div>
73
​
74
<!-- Card 8 -->
75
<div class="card">
76
<div class="card-body">
77
<h4 class="card-title">Card 8</h4>
78
<p class="card-text">Text for this card.</p>
79
</div>
80
</div>
81
​
82
</div>
83
​
84
</div>
85
86
<!-- jQuery library -->
87
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
88
​
89
<!-- Popper -->
90
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
91
​
92
<!-- Latest compiled and minified Bootstrap JavaScript -->
93
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
94
​
95
<!-- Initialize Bootstrap functionality -->
96
<script>
97
// Initialize tooltip component
98
$(function () {
99
  $('[data-toggle="tooltip"]').tooltip()
100
})
101
​
102
// Initialize popover component
103
$(function () {
104
  $('[data-toggle="popover"]').popover()
105
})
106
</script>