Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Bootstrap Documentation

Inputs

Default

<div class="form-group">
    <input type="text" class="form-control" placeholder="Default input">
</div>

Emphasized

<div class="form-group">
    <input type="text" class="form-control form-control-emphasized" placeholder="Emphasized input">
</div>

Muted

<div class="form-group">
    <input type="text" class="form-control form-control-muted" placeholder="Muted input">
</div>

Flushed

<div class="form-group">
    <input type="text" class="form-control form-control-flush" placeholder="Flushed input">
</div>

Options

States

<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

<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

<textarea class="form-control" placeholder="You can manually resize this textarea" rows="3"></textarea>

Non resizable

<textarea class="form-control" placeholder="This is a fixed height textarea" rows="3" resize="none"></textarea>

Custom forms

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

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

Select menu

<select class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Summary