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

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

<select class="form-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Form check

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="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">Check this custom checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Toggle this custom radio</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">Or toggle this other custom radio</label>
</div>
<div class="form-check form-check-inline form-check-color">
  <input class="form-check-input" type="checkbox" id="customColor1" style="background-color: red">
  <label class="form-check-label" for="customColor1">Custom color checkbox / radio</label>
</div>
<div class="form-check form-check-inline form-check-text">
  <input class="form-check-input" type="checkbox" id="customText1">
  <label class="form-check-label" for="customText1">
    Custom text checkbox / radio
  </label>
</div>
<div class="form-check form-check-img">
  <input class="form-check-input" type="checkbox" id="customImage1" style="background-image: url(../assets/img/products/product-7.jpg);">
  <label class="form-check-label" for="customImage1"></label>
</div>
<div class="form-check form-check-size">
  <input class="form-check-input" type="checkbox" id="customSize1">
  <label class="form-check-label" for="customSize1">XXS</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>