Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Default
Alternative
If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.
Flush
Remove all borders and shadows so you can use it inside other elements:
Muted
Remove all borders and shadows so you can use it inside other elements:
Textual form controls—like <input>
s, <select>
s, and <textarea>
s—are styled with the .form-control
class. Included are styles for general appearance, focus state, sizing, and more.
For all form control you can apply the additional modifier classes explained in the Inputs section: .form-control-alternative
, .form-control-flush
and .form-control-muted
.
File browser
<form>
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFileLang" lang= "en" >
<label class= "custom-file-label" for= "customFileLang" > Select file</label>
</div>
</form>
Sizing
Large select
Default select
Small select
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.
Checkboxes
<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>
Radios
<div class= "custom-control custom-radio mb-3" >
<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>
Inline
<div class= "custom-control custom-radio custom-control-inline" >
<input type= "radio" id= "customRadioInline1" name= "customRadioInline1" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadioInline1" > Toggle this custom radio</label>
</div>
<div class= "custom-control custom-radio custom-control-inline" >
<input type= "radio" id= "customRadioInline2" name= "customRadioInline1" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadioInline2" > Or toggle this other custom radio</label>
</div>
Disabled
<div class= "custom-control custom-checkbox" >
<input type= "checkbox" class= "custom-control-input" id= "customCheckDisabled" disabled >
<label class= "custom-control-label" for= "customCheckDisabled" > Check this custom checkbox</label>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" id= "radio3" name= "radioDisabled" id= "customRadioDisabled" class= "custom-control-input" disabled >
<label class= "custom-control-label" for= "customRadioDisabled" > Toggle this custom radio</label>
</div>
Toggles
Labeled toggles
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" >
<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" >
<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>