Forms

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Form controls

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <input type="text" placeholder="Regular" class="form-control" disabled />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group mb-4">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
          </div>
          <input class="form-control" placeholder="Search" type="text">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group mb-4">
          <input class="form-control" placeholder="Birthday" type="text">
          <div class="input-group-append">
            <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group has-success">
        <input type="text" placeholder="Success" class="form-control is-valid" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group has-danger">
        <input type="email" placeholder="Error Input" class="form-control is-invalid" />
      </div>
    </div>
  </div>
</form>

Alternative

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="email" class="form-control form-control-alternative" id="exampleFormControlInput1" placeholder="[email protected]">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <input type="text" placeholder="Regular" class="form-control form-control-alternative" disabled />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group input-group-alternative mb-4">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
          </div>
          <input class="form-control form-control-alternative" placeholder="Search" type="text">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group input-group-alternative mb-4">
          <input class="form-control" placeholder="Birthday" type="text">
          <div class="input-group-append">
            <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group has-success">
        <input type="text" placeholder="Success" class="form-control form-control-alternative is-valid" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group has-danger">
        <input type="email" placeholder="Error Input" class="form-control form-control-alternative is-invalid" />
      </div>
    </div>
  </div>
</form>

Textarea

<form>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write a large text here ..."></textarea>
</form>

Alternative

<form>
  <textarea class="form-control form-control-alternative" rows="3" placeholder="Write a large text here ..."></textarea>
</form>

Checkboxes

<div class="custom-control custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck1" type="checkbox">
  <label class="custom-control-label" for="customCheck1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck2" type="checkbox" checked>
  <label class="custom-control-label" for="customCheck2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck3" type="checkbox" disabled>
  <label class="custom-control-label" for="customCheck3">Disabled Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck4" type="checkbox" checked disabled>
  <label class="custom-control-label" for="customCheck4">Disabled Checked</label>
</div>

Alternative

<div class="custom-control custom-control-alternative custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck5" type="checkbox">
  <label class="custom-control-label" for="customCheck5">Unchecked</label>
</div>
<div class="custom-control custom-control-alternative custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck6" type="checkbox" checked>
  <label class="custom-control-label" for="customCheck6">Checked</label>
</div>
<div class="custom-control custom-control-alternative custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck7" type="checkbox" disabled>
  <label class="custom-control-label" for="customCheck7">Disabled Unchecked</label>
</div>
<div class="custom-control custom-control-alternative custom-checkbox mb-3">
  <input class="custom-control-input" id="customCheck8" type="checkbox" checked disabled>
  <label class="custom-control-label" for="customCheck8">Disabled Checked</label>
</div>

Radio buttons

<div class="custom-control custom-radio mb-3">
  <input name="custom-radio-2" class="custom-control-input" id="customRadio5" type="radio">
  <label class="custom-control-label" for="customRadio5">Unchecked</label>
</div>
<div class="custom-control custom-radio mb-3">
  <input name="custom-radio-2" class="custom-control-input" id="customRadio6" checked="" type="radio">
  <label class="custom-control-label" for="customRadio6">Checked</label>
</div>
<div class="custom-control custom-radio mb-3">
  <input name="custom-radio-2" class="custom-control-input" id="customRadio7" disabled="" type="radio">
  <label class="custom-control-label" for="customRadio7">Disabled unchecked</label>
</div>
<div class="custom-control custom-radio mb-3">
  <input name="custom-radio-2" class="custom-control-input" id="customRadio8" checked="" disabled="" type="radio">
  <label class="custom-control-label" for="customRadio8">Disabled checkbox</label>
</div>

Alternative

<div class="custom-control custom-control-alternative custom-radio mb-3">
  <input name="custom-radio-1" class="custom-control-input" id="customRadio1" type="radio">
  <label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
<div class="custom-control custom-control-alternative custom-radio mb-3">
  <input name="custom-radio-1" class="custom-control-input" id="customRadio2" checked="" type="radio">
  <label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<div class="custom-control custom-control-alternative custom-radio mb-3">
  <input name="custom-radio-1" class="custom-control-input" id="customRadio3" disabled="" type="radio">
  <label class="custom-control-label" for="customRadio3">Disabled unchecked</label>
</div>
<div class="custom-control custom-control-alternative custom-radio mb-3">
  <input name="custom-radio-1" class="custom-control-input" id="customRadio4" checked="" disabled="" type="radio">
  <label class="custom-control-label" for="customRadio4">Disabled checkbox</label>
</div>

Toggle buttons

<label class="custom-toggle">
  <input type="checkbox">
  <span class="custom-toggle-slider rounded-circle"></span>
</label>
<span class="clearfix"></span>
<label class="custom-toggle">
  <input type="checkbox" checked>
  <span class="custom-toggle-slider rounded-circle"></span>
</label>

Sliders

<!-- Simple slider -->
<div class="input-slider-container">
  <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
  <!-- Input slider values -->
  <div class="row mt-3 d-none">
    <div class="col-6">
      <span id="input-slider-value" class="range-slider-value" data-range-value-low="100"></span>
    </div>
  </div>
</div>

<div class="mt-5">
  <!-- Range slider container -->
  <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
  <!-- Range slider values -->
  <div class="row d-none">
      <div class="col-6">
          <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
      </div>
      <div class="col-6 text-right">
          <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
      </div>
  </div>
</div>