Form

Shopper supports all of Bootstrap's default form styling in addition to a handful of new input types and features.
Bootstrap documentation

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com
Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<div class="form-group">
  <input type="text" class="form-control form-control-lg" placeholder=".form-control-lg">
</div>

<div class="form-group">
  <input type="text" class="form-control" placeholder=".form-control">
</div>

<div class="form-group">
  <input type="text" class="form-control form-control-sm" placeholder=".form-control-sm">
</div>

<div class="form-group">
  <input type="text" class="form-control form-control-xs" placeholder=".form-control-xs">
</div>

<div class="form-group">
  <input type="text" class="form-control form-control-xxs" placeholder=".form-control-xxs">
</div>
Underline

Removes top, right, and left borders of a .form-control.

<div class="form-group">
  <input type="text" class="form-control form-control-underline" placeholder=".form-control-underline">
</div>
Input group merge

A slightly modified version of the default input groups that always keeps icons as a part of the form control.

<div class="input-group input-group-merge">
  <input class="form-control" type="search" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-outline-border" type="submit">
      <i class="fe fe-search"></i>
    </button>
  </div>
</div>
Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<div class="custom-control custom-control-color">
  <input type="checkbox" class="custom-control-input" id="customColor1">
  <label class="custom-control-label" for="customColor1" style="color: red;">
    <span class="text-gray-450">Custom color checkbox / radio</span>
  </label>
</div>
<div class="custom-control custom-control-text">
  <input type="checkbox" class="custom-control-input" id="customText1">
  <label class="custom-control-label" for="customText1">
    Custom text checkbox / radio
  </label>
</div>
<div class="custom-control custom-control-img">
  <input type="checkbox" class="custom-control-input" id="customImage1">
  <label class="custom-control-label" for="customImage1">
    <span class="embed-responsive embed-responsive-1by1 bg-cover" style="background-image: url(../assets/img/products/product-7.jpg);"></span>
  </label>
</div>
<div class="custom-control custom-control-size">
  <input type="checkbox" class="custom-control-input" id="customSize1">
  <label class="custom-control-label" for="customSize1">XXS</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>