
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.
<form class="was-validated"> <div class="row"> <div class="mb-15 col-sm-6"> <input type="text" class="form-control" placeholder="Valid state"> <div class="valid-feedback">Looks good!</div> </div> <div class="mb-15 col-sm-6"> <input type="text" class="form-control" placeholder="Invalid state" required=""> <div class="invalid-feedback">This is required</div> </div> <div class="mb-15 col-sm-6"> <textarea class="form-control" rows="2" placeholder="Valid state"></textarea> <div class="valid-feedback">Looks good!</div> </div> <div class="mb-15 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="form-check"> <input type="checkbox" class="form-check-input" id="customCheck1"> <label class="form-check-label" for="customCheck1">Custom checkbox</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="customCheck2" disabled> <label class="form-check-label" for="customCheck2">Custom checkbox (disabled)</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="customCheck3" checked> <label class="form-check-label" for="customCheck3">Custom checkbox (checked)</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="customCheck4" checked disabled> <label class="form-check-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="form-check-input" checked> <label class="form-check-label" for="customRadio1">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="form-check-input"> <label class="form-check-label" for="customRadio2">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio3" name="customRadio2" class="form-check-input" checked disabled> <label class="form-check-label" for="customRadio3">Custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio4" name="customRadio2" class="form-check-input" disabled> <label class="form-check-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="form-check form-switch"> <input type="checkbox" class="form-check-input" id="customSwitch1"> <label class="form-check-label" for="customSwitch1">Toggle this switch element</label> </div> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" disabled id="customSwitch2"> <label class="form-check-label" for="customSwitch2">Disabled switch element</label> </div> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="customSwitch3" checked> <label class="form-check-label" for="customSwitch3">Toggle this switch element</label> </div> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" disabled id="customSwitch4" checked disabled> <label class="form-check-label" for="customSwitch4">Disabled switch element</label> </div>
Range
Create custom range controls with .form-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="form-file"> <input type="file" class="form-file-input" id="customFile"> <label class="form-file-label" for="customFile"> <span class="form-file-text">Choose file...</span> <span class="form-file-button">Browse</span> </label> </div>
Select
Custom select menus need only a custom class, .form-select
to trigger the
custom
styles.
<select class="form-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="mb-15 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="mb-15 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="mb-15 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="mb-15 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="mb-15 row"> <label class="col-sm-2 col-form-label">Static</label> <div class="col-sm-10"> <div class="input-group"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </div> </div> <div class="mb-15 row"> <label class="col-sm-2 col-form-label">Dropdowns</label> <div class="col-sm-10"> <div class="input-group mb-3"> <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> <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> </div> </div> </div> <div class="mb-15 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"> <button class="btn btn-dark" type="button">Button</button> </div> </div> </div> </form>
Basic
<form role="form"> <div class="mb-15"> <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="mb-15"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="mb-15"> <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="mb-15 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="mb-15 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="mb-15 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="mb-15 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="mb-15 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="mb-15 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="mb-15 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="mb-15">
<label for="inputAddress" class="col-form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="mb-15">
<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="mb-15 col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="mb-15 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="mb-15 col-md-2">
<label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="mb-15">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck11">
<label class="form-check-label" for="customCheck11">Check this custom
checkbox</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>