Image Selection With Checkbox Or Radio Input – Bootstrap Image Checkbox

Author: iqbalfn
Views Total: 14,560 views
Official Page: Go to website
Last Update: September 26, 2019
License: MIT


Image Selection With Checkbox Or Radio Input – Bootstrap Image Checkbox


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="" alt="#" class="img-fluid">
<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="" alt="#" class="img-fluid">



  • Add form validation style

See also  Custom Style Dropdown Select In Pure CSS - select-css

Leave a Reply

Your email address will not be published. Required fields are marked *