Form Layouts - Checkbox Forms
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Checkbox #1
<!-- Radio Checkbox Group -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline1">
<img class="max-width-9" src="../../assets/img/100x60/img5.jpg" alt="Image Description">
</label>
</div>
<div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline2">
<img class="max-width-9" src="../../assets/img/100x60/img4.jpg" alt="Image Description">
</label>
</div>
<div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
<input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline3">
<img class="max-width-9" src="../../assets/img/100x60/img6.jpg" alt="Image Description">
</label>
</div>
<!-- End Radio Checkbox Group -->
Checkbox #2
<!-- Radio Checkbox Group -->
<div class="row mx-gutters-2">
<div class="col-6 col-md-3 mb-3 mb-md-0">
<div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
<input type="radio" id="typeOfListingRadio1" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio1">
<img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/small-house.svg" alt="SVG"
data-parent="#uploadForm">
<span class="d-block">House</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 mb-3 mb-md-0">
<div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
<input type="radio" id="typeOfListingRadio2" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input" checked>
<label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio2">
<img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/flat-house.svg" alt="SVG"
data-parent="#uploadForm">
<span class="d-block">Flat</span>
</label>
</div>
</div>
<div class="col-6 col-md-3">
<div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
<input type="radio" id="typeOfListingRadio3" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio3">
<img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/multi-family-house.svg" alt="SVG"
data-parent="#uploadForm">
<span class="d-block">Multi-family</span>
</label>
</div>
</div>
<div class="col-6 col-md-3">
<div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
<input type="radio" id="typeOfListingRadio4" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio4">
<img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/farm-land.svg" alt="SVG"
data-parent="#uploadForm">
<span class="d-block">Farms/land</span>
</label>
</div>
</div>
</div>
<!-- End Radio Checkbox Group -->