xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">Bootstrap tiles provide a flexible and extensible content container with multiple4
variants. </p>5
6
<p><strong>Detailed documentation and more examples of Bootstrap feed you can find in our <a href="https://mdbootstrap.com/docs/b4/jquery/components/panels/"7
target="_blank">Bootstrap Panels Docs</a>.</p>8
9
<hr class="my-5">10
11
<h2 class="my-5 h2">Tile columns</h2>12
13
<div class="card-columns text-white">14
<div class="card mt-2 mb-3 green">15
<div class="card-body">16
<h5 class="card-title">Panel title that wraps to a new line</h5>17
<p>This is a longer card with supporting text below as a natural lead-in to additional content. This content18
is a little bit longer.</p>19
</div>20
</div>21
<div class="card p-3 mb-3 indigo">22
<blockquote class="blockquote mb-0 card-body">23
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>24
</blockquote>25
</div>26
<div class="card mb-3 red">27
<div class="card-body">28
<h5 class="card-title">Panel title</h5>29
<p>This card has supporting text below as a natural lead-in to additional content.</p>30
<p><small>Last updated 3 mins ago</small></p>31
</div>32
</div>33
<div class="card blue text-center p-3 mt-2 mb-3">34
<blockquote class="blockquote mb-0">35
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>36
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>37
</blockquote>38
</div>39
<div class="card text-center mb-3 pink">40
<div class="card-body">41
<h5 class="card-title">Panel title</h5>42
<p>This card has a regular title and short paragraphy of text below it.</p>43
<p><small>Last updated 3 mins ago</small></p>44
</div>45
</div>46
<div class="card mb-3 purple">47
<div class="card-body">48
<h5 class="card-title">Panel title that wraps to a new line</h5>49
<p>This is a longer card with supporting text below as a natural lead-in to additional content. This content50
is a little bit longer.</p>51
</div>52
</div>53
<div class="card p-3 text-right mt-2 mb-3 deep-purple">54
<blockquote class="blockquote mb-0">55
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>56
</blockquote>57
</div>58
<div class="card mb-3 cyan">59
<div class="card-body">60
<h5 class="card-title">Panel title</h5>61
<p>This is another card with title and supporting text below. This card has some additional content to make62
it slightly taller overall.</p>63
<p><small>Last updated 3 mins ago</small></p>64
</div>65
</div>66
<div class="card text-center mb-3 deep-orange">67
<div class="card-body">68
<h5 class="card-title">Panel title</h5>69
<p>This card has a regular title and short paragraphy of text below it.</p>70
<p><small>Last updated 3 mins ago</small></p>71
</div>72
</div>73
</div>74
75
<hr class="my-5">76
77
<h2 class="my-5 h2">Panel styles</h2>78
79
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">80
<div class="card-header">Header</div>81
<div class="card-body">82
<h5 class="card-title">Primary Panel title</h5>83
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the84
panel's content.</p>85
</div>86
</div>87
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">88
<div class="card-header">Header</div>89
<div class="card-body">90
<h5 class="card-title">Secondary Panel title</h5>91
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the92
panel's content.</p>93
</div>94
</div>95
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">96
<div class="card-header">Header</div>97
<div class="card-body">98
<h5 class="card-title">Success Panel title</h5>99
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the100
panel's content.</p>101
</div>102
</div>103
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">104
<div class="card-header">Header</div>105
<div class="card-body">106
<h5 class="card-title">Danger Panel title</h5>107
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the108
panel's content.</p>109
</div>110
</div>111
<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">112
<div class="card-header">Header</div>113
<div class="card-body">114
<h5 class="card-title">Warning Panel title</h5>115
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the116
panel's content.</p>117
</div>118
</div>119
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">120
<div class="card-header">Header</div>121
<div class="card-body">122
<h5 class="card-title">Info Panel title</h5>123
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the124
panel's content.</p>125
</div>126
</div>127
<div class="card bg-light mb-3" style="max-width: 20rem;">128
<div class="card-header">Header</div>129
<div class="card-body">130
<h5 class="card-title">Light Panel title</h5>131
<p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's132
content.</p>133
</div>134
</div>135
<div class="card text-white bg-dark" style="max-width: 20rem;">136
<div class="card-header">Header</div>137
<div class="card-body">138
<h5 class="card-title">Dark Panel title</h5>139
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the140
panel's content.</p>141
</div>142
</div>143
144
145
</div>1
1
1
1
Console errors: 0