Forms

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


Overview

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.


Input

A basic form control with disabled and readonly mode.

<input type="text" class="form-control" placeholder="Input box">
<input type="text" class="form-control" placeholder="Input box (disabled)" disabled>
<textarea class="form-control" rows="2" placeholder="Textarea"></textarea>
<textarea class="form-control" rows="2" placeholder="Textarea (disabled)" disabled></textarea>
                    

Validation State

A form control with success, warning and error state.

Looks good!
This is required
Looks good!
This is required
<form class="was-validated">
    <div class="row">
        <div class="form-group col-sm-6">
            <input type="text" class="form-control" placeholder="Valid state">
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="form-group col-sm-6">
            <input type="text" class="form-control" placeholder="Invalid state" required="">
            <div class="invalid-feedback">This is required</div>
        </div>
        <div class="form-group col-sm-6">
            <textarea class="form-control" rows="2" placeholder="Valid state"></textarea>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="form-group col-sm-6">
            <textarea class="form-control" rows="2" placeholder="Invalid state"
                required=""></textarea>
            <div class="invalid-feedback">This is required</div>
        </div>
    </div>
</form>                    

Checkboxes

For even more customization and cross browser consistency, use our completely custom checkbox element to replace the browser defaults.

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2" disabled>
<label class="custom-control-label" for="customCheck2">Custom checkbox (disabled)</label>
</div>

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3" checked>
<label class="custom-control-label" for="customCheck3">Custom checkbox (checked)</label>
</div>

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4" checked disabled>
<label class="custom-control-label" for="customCheck4">Custom checkbox (checked disabled)</label>
</div>
                    

Radios

For even more customization and cross browser consistency, use our completely custom radio element to replace the browser defaults.

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
  <label class="custom-control-label" for="customRadio1">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">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio3" name="customRadio2" class="custom-control-input" checked disabled>
  <label class="custom-control-label" for="customRadio3">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio4" name="customRadio2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadio4">Custom radio</label>
</div>
                    

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch3" checked>
  <label class="custom-control-label" for="customSwitch3">Toggle this switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch4" checked disabled>
  <label class="custom-control-label" for="customSwitch4">Disabled switch element</label>
</div>
                    

Range

Create custom range controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.


File Browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>
                            

Select

Custom select menus need only a custom class, .custom-select to trigger the custom styles.

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

Input Sizes & Group

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

@
<form role="form" class="form-horizontal">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="example-input-small">Small</label>
        <div class="col-sm-10">
            <input type="text" id="example-input-small" name="example-input-small"
                class="form-control form-control-sm" placeholder=".input-sm">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="example-input-normal">Normal</label>
        <div class="col-sm-10">
            <input type="text" id="example-input-normal" name="example-input-normal"
                class="form-control" placeholder="Normal">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="example-input-large">Large</label>
        <div class="col-sm-10">
            <input type="text" id="example-input-large" name="example-input-large"
                class="form-control form-control-lg" placeholder=".input-lg">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Grid Sizes</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" placeholder=".col-sm-4">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Static</label>
        <div class="col-sm-10">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                    aria-describedby="basic-addon1">
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Dropdowns</label>
        <div class="col-sm-10">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn btn-primary  dropdown-toggle" type="button"
                        data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">Dropdown</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label=""
                    aria-describedby="basic-addon1">
            </div>

        </div>
    </div>

    <div class="form-group row mb-0">
        <label class="col-sm-2 col-form-label">Buttons</label>
        <div class="col-sm-10">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-dark"
                        type="button">Button</button>
                </div>
            </div>
        </div>
    </div>

</form>
                    

Basic

We'll never share your email with anyone else.
<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1"
            aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
            else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1"
            placeholder="Password">
    </div>
    <div class="form-group">
        <div class="checkbox">
            <input id="checkbox0" type="checkbox">
            <label for="checkbox0">
                Check me out
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
                    

Horizontal

<form class="form-horizontal" role="form">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
        <div class="col-sm-9">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword5" class="col-sm-3 col-form-label">Re Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" id="inputPassword5"
                placeholder="Retype Password">
        </div>
    </div>
    <div class="form-group row justify-content-end">
        <div class="col-sm-9">
            <div class="checkbox checkbox-primary">
                <input id="checkbox2" type="checkbox">
                <label for="checkbox2">
                    Check me out !
                </label>
            </div>
        </div>
    </div>
    <div class="form-group mb-0 justify-content-end row">
        <div class="col-sm-9">
            <button type="submit" class="btn btn-info">Sign in</button>
        </div>
    </div>
</form>
                    

Form Grid

You may also swap .row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<form>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="inputEmail4" class="col-form-label">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
        </div>
        <div class="form-group col-md-6">
            <label for="inputPassword4" class="col-form-label">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="inputAddress" class="col-form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="form-group">
        <label for="inputAddress2" class="col-form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2"
            placeholder="Apartment, studio, or floor">
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="inputCity" class="col-form-label">City</label>
            <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group col-md-4">
            <label for="inputState" class="col-form-label">State</label>
            <select id="inputState" class="form-control">
                <option>Choose</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>

            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="inputZip" class="col-form-label">Zip</label>
            <input type="text" class="form-control" id="inputZip">
        </div>
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck11">
            <label class="custom-control-label" for="customCheck11">Check this custom
                checkbox</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>