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 -->