Image Checkbox & Radio
To create custom checkbox and radio with image, use image-control class with custom-control and put <img> tag inside of<label> tag.
With Checkbox
Default
Checked
Disabled
Checked Disabled
With Radio
Default
Checked
Disabled
Checked Disabled
Code Example
<div class="custom-control custom-checkbox image-control"> <input type="checkbox" class="custom-control-input" id="imageCheck1"> <label class="custom-control-label" for="imageCheck1"><img src="/demo9/images/stock/sq/a.jpg" alt=""></label></div>
Code Example
<div class="custom-control custom-radio image-control"> <input type="radio" class="custom-control-input" id="imageRadio1"> <label class="custom-control-label" for="imageRadio1"><img src="/demo9/images/stock/sq/d.jpg" alt=""></label></div>
Grouped Checkbox
For Grouped checkbox, use custom-control-pro class with custom-control also if you want to hide control then use no-control class with it.
For group use ul.custom-control-group > li > .custom-control if you want vertical them use .custom-control-vertical on ul.
Default Mode
NoControl Mode
With Icon
Only Icon
Code Example
<ul class="custom-control-group"> <li> <div class="custom-control custom-control-sm custom-checkbox custom-control-pro"> <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl1"> <label class="custom-control-label" for="btnCheckControl1">Option Label</label> </div> </li> <li> <div class="custom-control custom-control-sm custom-checkbox custom-control-pro"> <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl5" checked> <label class="custom-control-label" for="btnCheckControl5">Option Checked</label> </div> </li> <li> <div class="custom-control custom-control-sm custom-checkbox custom-control-pro"> <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl6" disabled> <label class="custom-control-label" for="btnCheckControl6">Option Disabled</label> </div> </li></ul>
Grouped Radio
For Grouped radio, use custom-control-pro class with custom-control also if you want to hide control then use no-control class with it.
For group use ul.custom-control-group > li > .custom-control if you want vertical them use .custom-control-vertical on ul.
Default Mode
NoControl Mode
With Icon
Only Icon
Color Choose
Code Example
<ul class="custom-control-group"> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio1"> <label class="custom-control-label" for="btnRadio1">Option Label</label> </div> </li> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio5" checked> <label class="custom-control-label" for="btnRadio5">Option Checked</label> </div> </li> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio6" disabled> <label class="custom-control-label" for="btnRadio6">Option Disabled</label> </div> </li></ul>
With Custom Content
You can create checkbox or radio with any styled element, just like displayed below. just add .custom-control-pro class with .custom-control then put that styled element in <label> tag. An example with user card shown for display purpose.
Note : you should not use any block-level elements inside label tag.
User Selection
User Choose
Payment Method
Code Example
<ul class="custom-control-group custom-control-vertical w-100"> <li> <div class="custom-control custom-control-sm custom-checkbox custom-control-pro"> <input type="checkbox" class="custom-control-input" id="user-selection-s1" name="user-selection"> <label class="custom-control-label" for="user-selection-s1"> <span class="user-card"> <span class="user-avatar sq"> <img src="/demo9/images/avatar/c-sm.jpg" alt=""> </span> <span class="user-info"> <span class="lead-text">Keith Jensen</span> <span class="sub-text">Senior Developer</span> </span> </span> </label> </div> </li> <li> <div class="custom-control custom-control-sm custom-checkbox custom-control-pro"> <input type="checkbox" class="custom-control-input" id="user-selection-s2" name="user-selection"> <label class="custom-control-label" for="user-selection-s2"> <span class="user-card"> <span class="user-avatar sm bg-pink"> <span>AB</span> </span> <span class="user-info"> <span class="lead-text">Abu Bin Ishtiyak</span> <span class="sub-text">Senior Developer</span> </span> </span> </label> </div> </li></ul>
Code Example
<ul class="custom-control-group custom-control-vertical custom-control-stacked w-100"> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" id="user-choose-s1" name="user-choose"> <label class="custom-control-label" for="user-choose-s1"> <span class="user-card"> <span class="user-avatar sm"> <img src="/demo9/images/avatar/c-sm.jpg" alt=""> </span> <span class="user-name">Keith Jensen</span> </span> </label> </div> </li> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" id="user-choose-s2" name="user-choose"> <label class="custom-control-label" for="user-choose-s2"> <span class="user-card"> <span class="user-avatar sm bg-pink"> <span>AB</span> </span> <span class="user-name">Abu Bin Ishtiyak</span> </span> </label> </div> </li></ul>
Code Example
<ul class="custom-control-group custom-control-vertical w-100"> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck1"> <label class="custom-control-label" for="paymentCheck1"> <em class="icon icon-lg ni ni-cc-paypal"></em><span>Paypal</span> </label> </div> </li> <li> <div class="custom-control custom-control-sm custom-radio custom-control-pro"> <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck2"> <label class="custom-control-label" for="paymentCheck2"> <em class="icon icon-lg ni ni-cc-mc"></em><span>Master Card</span> </label> </div> </li></ul>
