xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong4
>Bootstrap filter functionality enables your users to select images, products, cards, and other data that meet their requirements.</strong5
>6
</p>7
8
<hr />9
10
<p class="font-weight-bold">Basic examples</p>11
12
<p>13
You will <strong>find the code structure for this example in the tabs on the left</strong>. For even <strong>more examples, resources & customization options</strong> click the red <button class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner. 14
</p>15
16
<div class="border p-5 mb-5">17
<!-- Copy this code to have a working example -->18
<div class="row justify-content-center" id="checkbox-example-filters"19
data-mdb-items=".checkbox-example-item" data-mdb-auto-filter="true">20
<div class="col-md-6" data-mdb-filter="color">21
<span class="fa-lg mb-5">Filter: Color</span>22
23
<div class="form-check mt-3">24
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />25
<label class="form-check-label" for="inlineCheckbox1">Red</label>26
</div>27
28
<div class="form-check">29
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />30
<label class="form-check-label" for="inlineCheckbox2">Blue</label>31
</div>32
33
<div class="form-check">34
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />35
<label class="form-check-label" for="inlineCheckbox3">Black</label>36
</div>37
38
<div class="form-check">39
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />40
<label class="form-check-label" for="inlineCheckbox4">Gray</label>41
</div>42
</div>43
44
<div class="col-md-6" data-mdb-filter="sale">45
<span class="fa-lg mb-5">Filter: Sale</span>46
47
<div class="form-check mt-3">48
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />49
<label class="form-check-label" for="inlineCheckbox5">Yes</label>50
</div>51
52
<div class="form-check">53
<input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />54
<label class="form-check-label" for="inlineCheckbox6">No</label>55
</div>56
</div>57
</div>58
59
<div class="row text-center">60
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no"61
data-mdb-price="100">62
<div class="card shadow-2">63
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"64
class="card-img-top" alt="..." />65
66
<div class="card-body">67
<h5 class="card-title">Black Jeans Jacket</h5>68
<p class="card-text">69
100$70
</p>71
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>72
</div>73
</div>74
</div>75
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-sale="yes" data-mdb-color="gray"76
data-mdb-price="80">77
<div class="card shadow-2">78
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"79
class="card-img-top" alt="..." />80
81
<div class="card-body">82
<h5 class="card-title">Gray Jumper</h5>83
<p class="card-text">84
<span class="text-decoration-line-through">100$</span>85
<span class="fw-bold fa-lg">80$</span>86
</p>87
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>88
</div>89
</div>90
</div>91
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="blue" data-mdb-sale="no"92
data-mdb-price="90">93
<div class="card shadow-2">94
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"95
class="card-img-top" alt="..." />96
97
<div class="card-body">98
<h5 class="card-title">Blue Jeans Jacket</h5>99
<p class="card-text">100
90$101
</p>102
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>103
</div>104
</div>105
</div>106
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="red" data-mdb-sale="yes"107
data-mdb-price="120">108
<div class="card shadow-2">109
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"110
class="card-img-top" alt="..." />111
112
<div class="card-body">113
<h5 class="card-title">Red Hoodie</h5>114
<p class="card-text">115
<span class="text-decoration-line-through">150$</span>116
<span class="fw-bold fa-lg">120$</span>117
</p>118
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>119
</div>120
</div>121
</div>122
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no"123
data-mdb-price="100">124
<div class="card shadow-2">125
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"126
class="card-img-top" alt="..." />127
128
<div class="card-body">129
<h5 class="card-title">Black Jeans Jacket</h5>130
<p class="card-text">131
100$132
</p>133
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>134
</div>135
</div>136
</div>137
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="gray" data-mdb-sale="yes"138
data-mdb-price="80">139
<div class="card shadow-2">140
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"141
class="card-img-top" alt="..." />142
143
<div class="card-body">144
<h5 class="card-title">Gray Jumper</h5>145
<p class="card-text">146
<span class="text-decoration-line-through">100$</span>147
<span class="fw-bold fa-lg">80$</span>148
</p>149
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>150
</div>151
</div>152
</div>153
</div>154
<!--/ Copy this code to have a working example -->155
</div>156
157
<div class="border p-5">158
<!-- Copy this code to have a working example -->159
<div class="row justify-content-center" id="color-example-filters"160
data-mdb-items=".color-example-item" data-mdb-auto-filter="true">161
<div class="col-md-12 text-center mb-3" data-mdb-filter="color">162
<p class="fa-lg mt-2 mb-4">Filter: Color</p>163
164
<div class="form-check form-check-inline">165
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio1" value="red" />166
<label class="btn bg-danger btn-rounded p-4" for="colorRadio1"></label>167
</div>168
169
<div class="form-check form-check-inline">170
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio2" value="blue" />171
<label class="btn bg-primary btn-rounded p-4" for="colorRadio2"></label>172
</div>173
174
<div class="form-check form-check-inline">175
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio3" value="black" />176
<label class="btn bg-dark text-white btn-rounded p-4" for="colorRadio3"></label>177
</div>178
179
<div class="form-check form-check-inline">180
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio4" value="gray" />181
<label class="btn btn-rounded p-4" for="colorRadio4"182
style="background-color: #BDBDBD;"></label>183
</div>184
</div>185
<div class="col-md-12 text-center my-3">186
<button type="button" class="btn btn-primary" id="resetButton2">187
Clear all filters188
</button>189
</div>190
</div>191
192
<div class="row text-center">193
<div class="col-md-4 mt-3 color-example-item" data-mdb-color="black" data-mdb-sale="no"194
data-mdb-price="100">195
<div class="card shadow-2">196
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"197
class="card-img-top" alt="..." />198
199
<div class="card-body">200
<h5 class="card-title">Black Jeans Jacket</h5>201
<p class="card-text">202
100$203
</p>204
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>205
</div>206
</div>207
</div>208
<div class="col-md-4 mt-3 color-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">209
<div class="card shadow-2">210
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"211
class="card-img-top" alt="..." />212
213
<div class="card-body">214
<h5 class="card-title">Gray Jumper</h5>215
<p class="card-text">216
<span class="text-decoration-line-through">100$</span>217
<span class="fw-bold fa-lg">80$</span>218
</p>219
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>220
</div>221
</div>222
</div>223
<div class="col-md-4 mt-3 color-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">224
<div class="card shadow-2">225
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"226
class="card-img-top" alt="..." />227
228
<div class="card-body">229
<h5 class="card-title">Blue Jeans Jacket</h5>230
<p class="card-text">231
90$232
</p>233
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>234
</div>235
</div>236
</div>237
<div class="col-md-4 mt-3 color-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">238
<div class="card shadow-2">239
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"240
class="card-img-top" alt="..." />241
242
<div class="card-body">243
<h5 class="card-title">Red Hoodie</h5>244
<p class="card-text">245
<span class="text-decoration-line-through">150$</span>246
<span class="fw-bold fa-lg">120$</span>247
</p>248
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>249
</div>250
</div>251
</div>252
<div class="col-md-4 mt-3 color-example-item" data-mdb-color="black" data-mdb-sale="no"253
data-mdb-price="100">254
<div class="card shadow-2">255
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"256
class="card-img-top" alt="..." />257
258
<div class="card-body">259
<h5 class="card-title">Black Jeans Jacket</h5>260
<p class="card-text">261
100$262
</p>263
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>264
</div>265
</div>266
</div>267
<div class="col-md-4 mt-3 color-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">268
<div class="card shadow-2">269
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"270
class="card-img-top" alt="..." />271
272
<div class="card-body">273
<h5 class="card-title">Gray Jumper</h5>274
<p class="card-text">275
<span class="text-decoration-line-through">100$</span>276
<span class="fw-bold fa-lg">80$</span>277
</p>278
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>279
</div>280
</div>281
</div>282
</div>283
<!--/ Copy this code to have a working example -->284
</div>285
286
287
288
289
290
291
292
</div>1
1
xxxxxxxxxx1
const checkboxExampleFilters = document.getElementById('checkbox-example-filters');2
const checkboxInstance = new Filters(checkboxExampleFilters);3
4
const secondResetButton = document.getElementById('resetButton2');5
const colorExampleFilters = document.getElementById('color-example-filters');6
7
const colorExampleInstance = new Filters(colorExampleFilters);8
9
secondResetButton.addEventListener('click', () => {10
colorExampleInstance.clear();11
}); Console errors: 0