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
With Radio
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="./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="./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.
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="./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="./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>
