CheckboxDefault checkbox examples
Use .form-check-{success, danger, warning}
classes for checkbox and radio to change their checked states:
copy < div class = " form-check form-check-custom form-check-success" >
< input class = " form-check-input" type = " checkbox" value = " " checked />
< label class = " form-check-label" for = " " >
Success
</ label>
</ div>
< div class = " form-check form-check-custom form-check-danger" >
< input class = " form-check-input" type = " checkbox" value = " " checked />
< label class = " form-check-label" for = " " >
Danger
</ label>
</ div>
< div class = " form-check form-check-custom form-check-warning" >
< input class = " form-check-input" type = " checkbox" value = " " checked />
< label class = " form-check-label" for = " " >
Warning
</ label>
</ div>
Use clipped checkbox and radio with a clipped check indicator on image or any other rich content:
copy
< div class = " row" >
< div class = " col-4" >
< label class = " form-check-clip" >
< input class = " btn-check" type = " checkbox" value = " 1" checked name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-1.jpg" />
</ div>
< div class = " form-check-label" >
Option 1
</ div>
</ label>
</ div>
< div class = " col-4" >
< label class = " form-check-clip" >
< input class = " btn-check" type = " checkbox" value = " 2" name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-2.jpg" />
</ div>
< div class = " form-check-label" >
Option 2
</ div>
</ label>
</ div>
< div class = " col-4" >
< label class = " form-check-clip" >
< input class = " btn-check" type = " checkbox" value = " 3" name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-3.jpg" />
</ div>
< div class = " form-check-label" >
Option 3
</ div>
</ label>
</ div>
</ div>
RadioDefault radio examples
Use .form-check-{success, danger, warning}
classes for checkbox and radio to change their checked states:
copy < div class = " form-check form-check-custom form-check-success" >
< input class = " form-check-input" type = " radio" value = " " checked id = " flexCheckboxLg" />
< label class = " form-check-label" for = " flexCheckboxLg" >
Success
</ label>
</ div>
< div class = " form-check form-check-custom form-check-danger" >
< input class = " form-check-input" type = " radio" value = " " checked id = " flexCheckboxSm" />
< label class = " form-check-label" for = " flexCheckboxSm" >
Danger
</ label>
</ div>
< div class = " form-check form-check-custom form-check-warning" >
< input class = " form-check-input" type = " radio" value = " " checked id = " flexRadioLg" />
< label class = " form-check-label" for = " flexRadioLg" >
Warning
</ label>
</ div>
Use clipped checkbox and radio with a clipped check indicator on image or any other rich content:
copy
< div class = " row" >
< div class = " col-4" >
< label class = " form-check-clip text-center" >
< input class = " btn-check" type = " radio" value = " 1" checked name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-1.jpg" />
</ div>
< div class = " form-check-label" >
Option 1
</ div>
</ label>
</ div>
< div class = " col-4" >
< label class = " form-check-clip text-center" >
< input class = " btn-check" type = " radio" value = " 2" name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-2.jpg" />
</ div>
< div class = " form-check-label" >
Option 2
</ div>
</ label>
</ div>
< div class = " col-4" >
< label class = " form-check-clip text-center" >
< input class = " btn-check" type = " radio" value = " 3" name = " option" />
< div class = " form-check-wrapper" >
< div class = " form-check-indicator" > </ div>
< img class = " form-check-content" src = " assets/media/stock/600x400/img-3.jpg" />
</ div>
< div class = " form-check-label" >
Option 3
</ div>
</ label>
</ div>
</ div>
SwitchDefault checkbox examples