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>

Radio buttons

<div class="custom-control 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-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-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-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="sliderRegular" class="slider"></div>
  <br>
  <div id="sliderDouble" class="slider slider-primary"></div>
</div>