xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">An example of bootstrap theming . Easy to implement and customize. Examples of basic and advanced usage.</p>4
5
<p>6
<strong>Detailed documentation and more examples you can find in our 7
<a href="https://mdbootstrap.com/docs/jquery/css/skins/" target="_blank">Bootstrap Skins Docs</a>8
</strong> 9
</p>10
11
<hr>12
13
<p class="font-weight-bold">Examples - click to see live preview</p>14
15
<section id="skins" class="text-center">16
17
<!-- Section heading -->18
<h3 class="section-heading h1 mb-5">Skins</h3>19
20
<!--Grid row-->21
<div class="row">22
23
<div class="col-md-6 mb-5">24
<div class="view overlay z-depth-1-half">25
<img src="https://mdbootstrap.com/img/screens/skins/white.jpg" alt="Material Design for Bootstrap white skin" class="img-fluid">26
27
<div class="mask rgba-white-slight">28
</div>29
</div>30
31
<h3 class="h3 pt-4 mt-1 pb-3">White Skin</h3>32
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98613" class="btn btn-info mt-1 waves-effect waves-light">Live33
preview</a>34
</div>35
36
<div class="col-md-6 mb-5">37
<div class="view overlay z-depth-1-half">38
<img src="https://mdbootstrap.com/img/screens/skins/black.jpg" alt="Material Design for Bootstrap black skin" class="img-fluid">39
40
<div class="mask rgba-white-slight">41
</div>42
</div>43
44
<h3 class="h3 pt-4 mt-1 pb-3">Black Skin</h3>45
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98624" class="btn btn-info mt-1 waves-effect waves-light">Live46
preview</a>47
</div>48
49
</div>50
51
<div class="row">52
53
<div class="col-md-6 mb-5">54
<div class="view overlay z-depth-1-half">55
<img src="https://mdbootstrap.com/img/screens/skins/cyan.jpg" alt="Material Design for Bootstrap cyan skin" class="img-fluid">56
57
<div class="mask rgba-white-slight">58
</div>59
</div>60
61
<h3 class="h3 pt-4 mt-1 pb-3">Cyan Skin</h3>62
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98648" class="btn btn-info mt-1 waves-effect waves-light">Live63
preview</a>64
</div>65
66
<div class="col-md-6 mb-5">67
<div class="view overlay z-depth-1-half">68
<img src="https://mdbootstrap.com/img/screens/skins/mdb.jpg" alt="Material Design for Bootstrap mdb skin" class="img-fluid">69
70
<div class="mask rgba-white-slight">71
</div>72
</div>73
74
<h3 class="h3 pt-4 mt-1 pb-3">MDB Skin</h3>75
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98644" class="btn btn-info mt-1 waves-effect waves-light">Live76
preview</a>77
</div>78
79
</div>80
81
<div class="row">82
83
<div class="col-md-6 mb-5">84
<div class="view overlay z-depth-1-half">85
<img src="https://mdbootstrap.com/img/screens/skins/deep-purple.jpg" alt="Material Design for Bootstrap deep purple skin" class="img-fluid">86
87
<div class="mask rgba-white-slight">88
</div>89
</div>90
91
<h3 class="h3 pt-4 mt-1 pb-3">Deep purple Skin</h3>92
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98655" class="btn btn-info mt-1 waves-effect waves-light">Live93
preview</a>94
</div>95
96
<div class="col-md-6 mb-5">97
<div class="view overlay z-depth-1-half">98
<img src="https://mdbootstrap.com/img/screens/skins/navy-blue.jpg" alt="Material Design for Bootstrap navy blue skin" class="img-fluid">99
100
<div class="mask rgba-white-slight">101
</div>102
</div>103
104
<h3 class="h3 pt-4 mt-1 pb-3">Navy blue Skin</h3>105
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98680" class="btn btn-info mt-1 waves-effect waves-light">Live106
preview</a>107
</div>108
109
</div>110
111
<div class="row">112
113
<div class="col-md-6 mb-5">114
<div class="view overlay z-depth-1-half">115
<img src="https://mdbootstrap.com/img/screens/skins/pink.jpg" alt="Material Design for Bootstrap pink skin" class="img-fluid">116
117
<div class="mask rgba-white-slight">118
</div>119
</div>120
121
<h3 class="h3 pt-4 mt-1 pb-3">Pink Skin</h3>122
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98672" class="btn btn-info mt-1 waves-effect waves-light">Live123
preview</a>124
</div>125
126
<div class="col-md-6 mb-5">127
<div class="view overlay z-depth-1-half">128
<img src="https://mdbootstrap.com/img/screens/skins/indigo.jpg" alt="Material Design for Bootstrap indigo skin" class="img-fluid">129
130
<div class="mask rgba-white-slight">131
</div>132
</div>133
134
<h3 class="h3 pt-4 mt-1 pb-3">Indigo Skin</h3>135
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98664" class="btn btn-info mt-1 waves-effect waves-light">Live136
preview</a>137
</div>138
139
</div>140
141
<div class="row">142
143
<div class="col-md-6 mb-5">144
<div class="view overlay z-depth-1-half">145
<img src="https://mdbootstrap.com/img/screens/skins/light-blue.jpg" alt="Material Design for Bootstrap light blue skin" class="img-fluid">146
147
<div class="mask rgba-white-slight">148
</div>149
</div>150
151
<h3 class="h3 pt-4 mt-1 pb-3">Light blue Skin</h3>152
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98685" class="btn btn-info mt-1 waves-effect waves-light">Live153
preview</a>154
</div>155
156
<div class="col-md-6 mb-5">157
<div class="view overlay z-depth-1-half">158
<img src="https://mdbootstrap.com/img/screens/skins/grey.jpg" alt="Material Design for Bootstrap grey skin" class="img-fluid">159
160
<div class="mask rgba-white-slight">161
</div>162
</div>163
164
<h3 class="h3 pt-4 mt-1 pb-3">Grey Skin</h3>165
<a href="https://mdbootstrap.com/snippets/jquery/mdbootstrap/98691" class="btn btn-info mt-1 waves-effect waves-light">Live166
preview</a>167
</div>168
169
</div>170
<!--Grid row-->171
172
</section>173
174
</div>1
1
1
1
Console errors: 0