Our form setup doesn’t override the browser’s default form styles. You have to use our specific classes to benefit from these styles.
Familiarize yourself with the concept of a "form group". A form group is a container that should hold a label and a form element, and optionally a help text and an error text.
For buttons in forms, refer to the Buttons and links documentation.
Handy classes:
.form-group:
The container for label, input, help text and validation
.form-control:
Styling for inputs, selects, and text areas
.form-control-file:
Like the above, but for file inputs
.form-control.form-control-sm:
Small form inputs
.form-control.form-control-lg:
Large form inputs
.form-control.form-control-fullwidth:
Form input with 100% width
.form-check:
Like form group, but for checkbox and radio inputs and labels
.form-check-input:
Styling for checkboxes and radios
.form-check-label:
Styling for checkbox and radio labels
<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-check">
<label class="form-check-label" for="exampleCheck1">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
BS-4.3 The difference here is BS is changing "addon" to "prepend" and "append"
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Arne And">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
</div>
</form>
<form>
<input class="form-control form-control-lg mb-1" type="text" placeholder=".form-control-lg">
<input class="form-control mb-1" type="text" placeholder=".form-control">
<input class="form-control form-control-sm mb-1" type="text" placeholder=".form-control-sm">
</form>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control form-control-fullwidth" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control form-control-fullwidth" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control custom-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label" for="gridCheck">
<input class="form-check-input" type="checkbox" id="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
We can easily indicate form input states by dynamically adding state classes (.has-success, .has-warning and .has-danger)
to a form groups wrapper element, typically a .form-group. The state will affect any label, .form-control and .form-control-feedback in your form group.
<div class="form-group row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputHorizontalSuccess" placeholder="name@example.com">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputHorizontalWarning" placeholder="name@example.com">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-danger">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputHorizontalDnger" placeholder="name@example.com">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-check has-success">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
<div class="form-check has-warning">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
<div class="form-check has-danger">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
Checkbox with danger
</label>
</div>
Use these if you want a bit more fancy checkboxes and radios. Beware, though, that these can be a bit finnicky, and they require the markup to be exactly as it is in these examples. Use sparingly and test browsers!
<div class="checkbox">
<input type="checkbox" id="customCheck1">
<label for="customCheck1">Check this custom checkbox</label>
</div>
<div class="checkbox">
<input type="checkbox" id="customCheck2">
<label for="customCheck2">Check this custom checkbox</label>
</div>
<div class="checkbox has-success">
<input type="checkbox" id="customCheck3" checked>
<label for="customCheck3">Check this custom checkbox with <code>.has-success</code> state</label>
</div>
<div class="radio">
<input type="radio" id="customRadio1" name="customRadio">
<label for="customRadio1">Toggle this custom radio</label>
</div>
<div class="radio">
<input type="radio" id="customRadio2" name="customRadio">
<label for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="radio has-warning">
<input type="radio" id="customRadio3" name="customRadio">
<label for="customRadio3">Or toggle this other custom radio with <code>.has-warning</code> state</label>
</div>
<div class="radio has-danger">
<input type="radio" id="customRadio4" name="customRadio">
<label for="customRadio4">Or toggle this other custom radio with <code>.has-danger</code> state</label>
</div>
Unchecked
Unchecked disabled
Checked
Checked disabled
<p>Unchecked</p>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">I am a blue toggle switch</label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">I am a green toggle switch</label>
</div>
<div class="custom-control custom-switch custom-switch-sand">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">I am a sand toggle switch</label>
</div>
<hr>
<p>Unchecked disabled</p>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" class="custom-control-input" id="customSwitch1a" disabled>
<label class="custom-control-label" for="customSwitch1a">I am a blue toggle switch disabled </label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" class="custom-control-input" id="customSwitch2a" disabled>
<label class="custom-control-label" for="customSwitch2a">I am a green toggle switch disabled</label>
</div>
<div class="custom-control custom-switch custom-switch-sand">
<input type="checkbox" class="custom-control-input" id="customSwitch3a" disabled>
<label class="custom-control-label" for="customSwitch3a">I am a sand toggle switch disabled</label>
</div>
<hr>
<p>Checked</p>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" class="custom-control-input" id="customSwitch1b" checked>
<label class="custom-control-label" for="customSwitch1b">I am a blue toggle switch checked </label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" class="custom-control-input" id="customSwitch2b" checked>
<label class="custom-control-label" for="customSwitch2b">I am a green toggle switch checked</label>
</div>
<div class="custom-control custom-switch custom-switch-sand">
<input type="checkbox" class="custom-control-input" id="customSwitch3b" checked>
<label class="custom-control-label" for="customSwitch3b">I am a sand toggle switch checked</label>
</div>
<hr>
<p>Checked disabled</p>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" class="custom-control-input" id="customSwitch4a" checked disabled>
<label class="custom-control-label" for="customSwitch4a">I am a blue toggle switch checked disabled </label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" class="custom-control-input" id="customSwitch5a" checked disabled>
<label class="custom-control-label" for="customSwitch5a">I am a green toggle switch checked disabled</label>
</div>
<div class="custom-control custom-switch custom-switch-sand">
<input type="checkbox" class="custom-control-input" id="customSwitch6a" checked disabled>
<label class="custom-control-label" for="customSwitch6a">I am a sand toggle switch checked disabled</label>
</div>