xxxxxxxxxx1
<div class="container my-5"> 2
3
<h1 class="h1">Switch</h1>4
<h3 class="h3 dark-grey-text">Bootstrap switch</h3>5
6
<hr class="my-4">7
8
<h4 class="h4 dark-grey-text mb-4">Switch colors variations</h4>9
10
<section class="border p-3">11
12
<!-- Switch -->13
<div class="switch primary-switch">14
<label>15
Off16
<input type="checkbox" checked="checked">17
<span class="lever"></span>18
On19
</label>20
</div>21
22
<!-- Switch -->23
<div class="switch default-switch">24
<label>25
Off26
<input type="checkbox" checked="checked">27
<span class="lever"></span>28
On29
</label>30
</div>31
32
<!-- Switch -->33
<div class="switch secondary-switch">34
<label>35
Off36
<input type="checkbox" checked="checked">37
<span class="lever"></span>38
On39
</label>40
</div>41
42
<!-- Switch -->43
<div class="switch success-switch">44
<label>45
Off46
<input type="checkbox" checked="checked">47
<span class="lever"></span>48
On49
</label>50
</div>51
52
<!-- Switch -->53
<div class="switch info-switch">54
<label>55
Off56
<input type="checkbox" checked="checked">57
<span class="lever"></span>58
On59
</label>60
</div>61
62
<!-- Switch -->63
<div class="switch warning-switch">64
<label>65
Off66
<input type="checkbox" checked="checked">67
<span class="lever"></span>68
On69
</label>70
</div>71
72
<!-- Switch -->73
<div class="switch danger-switch">74
<label>75
Off76
<input type="checkbox" checked="checked">77
<span class="lever"></span>78
On79
</label>80
</div>81
82
<!-- Switch -->83
<div class="switch amber-switch">84
<label>85
Off86
<input type="checkbox" checked="checked">87
<span class="lever"></span>88
On89
</label>90
</div>91
92
<!-- Switch -->93
<div class="switch mdb-color-switch">94
<label>95
Off96
<input type="checkbox" checked="checked">97
<span class="lever"></span>98
On99
</label>100
</div>101
102
<!-- Switch -->103
<div class="switch teal-switch">104
<label>105
Off106
<input type="checkbox" checked="checked">107
<span class="lever"></span>108
On109
</label>110
</div>111
112
<!-- Switch -->113
<div class="switch indigo-switch">114
<label>115
Off116
<input type="checkbox" checked="checked">117
<span class="lever"></span>118
On119
</label>120
</div>121
122
<!-- Switch -->123
<div class="switch pink-switch">124
<label>125
Off126
<input type="checkbox" checked="checked">127
<span class="lever"></span>128
On129
</label>130
</div>131
132
<!-- Switch -->133
<div class="switch blue-switch">134
<label>135
Off136
<input type="checkbox" checked="checked">137
<span class="lever"></span>138
On139
</label>140
</div>141
142
<!-- Switch -->143
<div class="switch blue-white-switch">144
<label>145
Off146
<input type="checkbox" checked="checked">147
<span class="lever"></span>148
On149
</label>150
</div>151
152
</section>153
154
<h4 class="h4 dark-grey-text mt-5 mb-4">Switch shapes variations</h4>155
156
<section class="border p-3 d-flex justify-content-start">157
158
<!-- Switch -->159
<div class="switch square blue-white-switch mt-2 mr-3">160
<label>161
Off162
<input type="checkbox">163
<span class="lever"></span>164
On165
</label>166
</div>167
168
<!-- Switch -->169
<div class="switch square blue-white-switch mt-2 mr-3">170
<label>171
Off172
<input type="checkbox" checked="checked">173
<span class="lever"></span>174
On175
</label>176
</div>177
178
<!-- Switch -->179
<div class="switch round blue-white-switch mt-2 mr-3">180
<label>181
Off182
<input type="checkbox">183
<span class="lever"></span>184
On185
</label>186
</div>187
188
<!-- Switch -->189
<div class="switch round blue-white-switch mt-2">190
<label>191
Off192
<input type="checkbox" checked="checked">193
<span class="lever"></span>194
On195
</label>196
</div>197
198
</section>199
200
<h4 class="h4 dark-grey-text mt-5 mb-4">Switch without labels</h4>201
202
<section class="border py-3 px-2">203
204
<div class="row">205
<div class="col-md-12 d-flex justify-content-start mt-2 mb-4">206
207
<!-- Switch -->208
<div class="switch square mdb-color-switch">209
<label>210
<input type="checkbox" checked="checked">211
<span class="lever"></span>212
</label>213
</div>214
215
<!-- Switch -->216
<div class="switch square default-switch">217
<label>218
<input type="checkbox" checked="checked">219
<span class="lever"></span>220
</label>221
</div>222
223
<!-- Switch -->224
<div class="switch square pink-switch">225
<label>226
<input type="checkbox" checked="checked">227
<span class="lever"></span>228
</label>229
</div>230
231
<!-- Switch -->232
<div class="switch square danger-switch">233
<label>234
<input type="checkbox" checked="checked">235
<span class="lever"></span>236
</label>237
</div>238
239
</div>240
<div class="col-md-12 d-flex justify-content-start">241
242
<!-- Switch -->243
<div class="switch round success-switch">244
<label>245
<input type="checkbox" checked="checked">246
<span class="lever"></span>247
</label>248
</div>249
250
<!-- Switch -->251
<div class="switch round warning-switch">252
<label>253
<input type="checkbox" checked="checked">254
<span class="lever"></span>255
</label>256
</div>257
258
<!-- Switch -->259
<div class="switch round secondary-switch">260
<label>261
<input type="checkbox" checked="checked">262
<span class="lever"></span>263
</label>264
</div>265
266
<!-- Switch -->267
<div class="switch round primary-switch">268
<label>269
<input type="checkbox" checked="checked">270
<span class="lever"></span>271
</label>272
</div>273
274
</div>275
</div>276
277
</section>278
279
<h4 class="h4 dark-grey-text mt-5 mb-4">Switch within form</h4>280
281
<section>282
283
<!-- Grid row -->284
<div class="row">285
286
<!-- Grid column -->287
<div class="col-md-8 col-lg-7 col-xl-5">288
289
<div class="card">290
<div class="card-body">291
292
<!-- Form register -->293
<form>294
<p class="h3 text-center my-4 blue-text">Sign up</p>295
<div class="md-form">296
<i class="fas fa-user prefix grey-text"></i>297
<input type="text" id="switchForm-name" class="form-control">298
<label for="switchForm-name">Your name</label>299
</div>300
<div class="md-form">301
<i class="fas fa-envelope prefix grey-text"></i>302
<input type="text" id="switchForm-email" class="form-control">303
<label for="switchForm-email">Your email</label>304
</div>305
<div class="md-form">306
<i class="fas fa-lock prefix grey-text"></i>307
<input type="password" id="switchForm-pass" class="form-control">308
<label for="switchForm-pass">Your password</label>309
</div>310
<div class="col-md-12 text-center">311
<p class="font-small text-muted">Would you like to receive our newsletter?</p>312
<!-- Switch -->313
<div class="switch primary-switch text-muted font-small">314
<label>315
No316
<input type="checkbox" checked="checked">317
<span class="lever"></span>318
Yes319
</label>320
</div>321
</div>322
<div class="text-center my-3">323
<button class="btn btn-primary btn-rounded">Sign up</button>324
</div>325
</form>326
<!-- Form register -->327
328
</div>329
</div>330
331
</div>332
<!-- Grid column -->333
334
</div>335
<!-- Grid row -->336
337
</section>338
339
<h4 class="h4 dark-grey-text mt-5 mb-4">Switch within modal</h4>340
341
<section class="border p-3">342
343
<!-- Grid row -->344
<div class="row">345
346
<!-- Grid column -->347
<div class="col-md-12">348
349
<!-- Button trigger modal -->350
<button type="button" class="btn btn-primary btn-rounded" data-toggle="modal" data-target="#basicExample">351
Launch modal with switch352
</button>353
354
<!-- Modal -->355
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">356
<div class="modal-dialog" role="document">357
<!-- Content -->358
<div class="modal-content">359
<!-- Header -->360
<div class="modal-header text-center">361
<h4 class="modal-title w-100 font-weight-bold blue-text h3" id="myModalLabel">Subscription</h4>362
<button type="button" class="close" data-dismiss="modal" aria-label="Close">363
<span aria-hidden="true">×</span>364
</button>365
</div>366
<!-- Body -->367
<div class="modal-body mx-4">368
<form name="form1" id="form1" method="post">369
<div class="md-form">370
<i class="fas fa-user prefix grey-text"></i>371
<input type="text" id="switchForm-name2" class="form-control">372
<label for="switchForm-name2">Your name</label>373
</div>374
<div class="md-form">375
<i class="fas fa-envelope prefix grey-text"></i>376
<input type="email" id="switchForm-email2" class="form-control">377
<label for="switchForm-email2">Your email</label>378
</div>379
<div class="d-flex justify-content-start pt-3">380
<p class="mr-4 mt-1">Notification 1</p>381
<!-- Switch -->382
<div class="switch round primary-switch text-muted font-small">383
<label>384
Off385
<input type="checkbox">386
<span class="lever"></span>387
On388
</label>389
</div>390
</div>391
<div class="d-flex justify-content-start pb-3">392
<p class="mr-4 mt-1">Notification 2</p>393
<!-- Switch -->394
<div class="switch round primary-switch text-muted font-small">395
<label>396
Off397
<input type="checkbox">398
<span class="lever"></span>399
On400
</label>401
</div>402
</div>403
</form>404
</div>405
<!-- Footer -->406
<div class="modal-footer">407
<button type="button" id="resetBtn" value="Reset" class="btn btn-elegant btn-block">Reset</button>408
</div>409
</div>410
<!-- Content -->411
</div>412
</div>413
414
</div>415
<!-- Grid column -->416
417
</div>418
<!-- Grid row -->419
420
</section>421
422
</div>xxxxxxxxxx1
.switch.primary-switch label input[type=checkbox]:checked + .lever {2
background-color: #689DF6;3
}4
.switch.primary-switch label input[type=checkbox]:checked + .lever:after {5
background-color: #4285F4;6
}7
.switch.default-switch label input[type=checkbox]:checked + .lever {8
background-color: #4DCCBF;9
}10
.switch.default-switch label input[type=checkbox]:checked + .lever:after {11
background-color: #2BBBAD;12
}13
.switch.secondary-switch label input[type=checkbox]:checked + .lever {14
background-color: #C791E2;15
}16
.switch.secondary-switch label input[type=checkbox]:checked + .lever:after {17
background-color: #a6c;18
}19
.switch.success-switch label input[type=checkbox]:checked + .lever {20
background-color: #2ACC6C;21
}22
.switch.success-switch label input[type=checkbox]:checked + .lever:after {23
background-color: #00C851;24
}25
.switch.info-switch label input[type=checkbox]:checked + .lever {26
background-color: #59C3EB;27
}28
.switch.info-switch label input[type=checkbox]:checked + .lever:after {29
background-color: #33b5e5;30
}31
.switch.warning-switch label input[type=checkbox]:checked + .lever {32
background-color: #FFA339;33
}34
.switch.warning-switch label input[type=checkbox]:checked + .lever:after {35
background-color: #F80;36
}37
.switch.danger-switch label input[type=checkbox]:checked + .lever {38
background-color: #FF606F;39
}40
.switch.danger-switch label input[type=checkbox]:checked + .lever:after {41
background-color: #ff3547;42
}43
.switch.teal-switch label input[type=checkbox]:checked + .lever {44
background-color: #b2dfdb;45
}46
.switch.teal-switch label input[type=checkbox]:checked + .lever:after {47
background-color: #80cbc4;48
}49
.switch.pink-switch label input[type=checkbox]:checked + .lever {50
background-color: #f8bbd0;51
}52
.switch.pink-switch label input[type=checkbox]:checked + .lever:after {53
background-color: #f48fb1;54
}55
.switch.blue-switch label input[type=checkbox]:checked + .lever {56
background-color: #b3e5fc;57
}58
.switch.blue-switch label input[type=checkbox]:checked + .lever:after {59
background-color: #81d4fa;60
}61
.switch.amber-switch label input[type=checkbox]:checked + .lever {62
background-color: #ffe082;63
}64
.switch.amber-switch label input[type=checkbox]:checked + .lever:after {65
background-color: #ffd54f;66
}67
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever {68
background-color: #618FB5;69
}70
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever:after {71
background-color: #3F729B;72
}73
.switch.indigo-switch label input[type=checkbox]:checked + .lever {74
background-color: #9fa8da;75
}76
.switch.indigo-switch label input[type=checkbox]:checked + .lever:after {77
background-color: #7986cb;78
}79
.switch.blue-white-switch label input[type=checkbox]:checked + .lever {80
background-color: #2196f3;81
}82
.switch.blue-white-switch label input[type=checkbox]:checked + .lever:after {83
background-color: #fff;84
}85
.switch.blue-white-switch label .lever {86
background-color: #ccc;87
}88
.switch.blue-white-switch label .lever:after {89
background-color: #fff;90
}91
92
.switch.round label .lever {93
width: 54px;94
height: 34px;95
border-radius: 10em;96
}97
.switch.round label .lever:after {98
width: 26px;99
height: 26px;100
border-radius: 50%;101
left: 4px;102
top: 4px;103
}104
.switch.square label .lever {105
width: 54px;106
height: 34px;107
border-radius: 0px;108
}109
.switch.square label .lever:after {110
width: 26px;111
height: 26px;112
border-radius: 0px;113
left: 4px;114
top: 4px;115
}116
.font-small {117
font-size: .9rem;118
}xxxxxxxxxx1
function Reset() {2
document.getElementById("form1").reset();3
}4
// Please do not use inline event handlers, use this instead:5
document.getElementById("resetBtn").onclick = function () {6
Reset();7
} Console errors: 0