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