Image Selection With Checkbox Or Radio Input – Bootstrap Image Checkbox

Category: CSS & CSS3 , Image | September 26, 2019
Author: iqbalfn
Views Total: 162
Official Page: Go to website
Last Update: September 26, 2019
License: MIT

Preview:

Image Selection With Checkbox Or Radio Input – Bootstrap Image Checkbox

Description:

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

You Might Be Interested In:


Leave a Reply