Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Inputs
Default
Show code
<div class="form-group">
<input type="text" class="form-control" placeholder="Default input">
</div>
Emphasized
Show code
<div class="form-group">
<input type="text" class="form-control form-control-emphasized" placeholder="Emphasized input">
</div>
Muted
Show code
<div class="form-group">
<input type="text" class="form-control form-control-muted" placeholder="Muted input">
</div>
Flushed
Show code
<div class="form-group">
<input type="text" class="form-control form-control-flush" placeholder="Flushed input">
</div>
Options
States
Show code
<div class="form-group">
<input type="text" class="form-control is-valid" placeholder="Is valid">
</div>
<div class="form-group">
<input type="text" class="form-control is-invalid" placeholder="Is invalid">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
Sizing
Show code
<div class="form-group">
<input type="text" class="form-control form-control-xl" placeholder="Extra large input">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Large input">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Normal input">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Small input">
</div>
Textarea
Default
Show code
<textarea class="form-control" placeholder="You can manually resize this textarea" rows="3"></textarea>
Non resizable
Show code
<textarea class="form-control" placeholder="This is a fixed height textarea" rows="3" resize="none"></textarea>
Custom forms
Checkboxes
Show code
<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>
Show code
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2" data-toggle="indeterminate">
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>
Show code
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" id="checkboxButton1" autocomplete="off" checked> Checkbox button
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" id="checkboxButton2" autocomplete="off" checked> Active
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="checkboxButton3" autocomplete="off"> Checkbox
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="checkboxButton4" autocomplete="off"> Checkbox
</label>
</div>
Radios
Show code
<div class="custom-control custom-radio">
<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>
Show code
<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>
Show code
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="custom-radio-3" id="radioButton1" autocomplete="off"> Radio button
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="custom-radio-2" id="radioButton2" autocomplete="off" checked> Active
</label>
<label class="btn btn-primary">
<input type="radio" name="custom-radio-2" id="radioButton3" autocomplete="off"> Radio
</label>
<label class="btn btn-primary">
<input type="radio" name="custom-radio-2" id="radioButton4" autocomplete="off"> Radio
</label>
</div>