Bootstrap Image Checkbox is a CSS extension for the Bootstrap 4 that provides a pretty nice image picker UI to select images using checkbox or radio inputs.
How to use it:
Download and load the bootstrap-image-checkbox.css after the Bootstrap’s stylesheet.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link href="/path/to/dist/bootstrap-image-checkbox.css" rel="stylesheet">
Add checkbox/radio buttons to images and apply custom-control, image-checkbox, and custom-checkbox/custom-radio classes to the containers as follows. Done.
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="ck1a">
<label class="custom-control-label" for="ck1a">
<img src="https://source.unsplash.com/640x426/?fitness" alt="#" class="img-fluid">
</label>
</div>
<div class="custom-control custom-radio image-checkbox">
<input type="radio" class="custom-control-input" id="ck2a" name="ck2">
<label class="custom-control-label" for="ck2a">
<img src="https://source.unsplash.com/640x426/?people" alt="#" class="img-fluid">
</label>
</div>
Changelog:
09/26/2019
- Add form validation style
The post Image Selection With Checkbox Or Radio Input – Bootstrap Image Checkbox appeared first on CSS Script.