Forms
Forms
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
Examples
<form>
<div class="form-group">
<select class="form-control custom-select" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<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>
Example (Inline)
BS-4.3 The difference here is BS is changing "addon" to "prepend" and "append"
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"
placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">:)</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2"
placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Sizing
<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="Default input">
<input class="form-control form-control-sm mb-1" type="text"
placeholder=".form-control-sm">
</form>
Validation and form states
<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>
Switch
Switch state
<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 primary</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 success</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" disabled class="custom-control-input"
id="customSwitch1b">
<label class="custom-control-label" for="customSwitch1b">I am disabled</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" checked class="custom-control-input" id="customSwitch1a">
<label class="custom-control-label" for="customSwitch1a">I am primary
checked</label>
</div>
<div class="custom-control custom-switch custom-switch-green">
<input type="checkbox" checked class="custom-control-input" id="customSwitch2a">
<label class="custom-control-label" for="customSwitch2a">I am success
checked</label>
</div>
<div class="custom-control custom-switch custom-switch-blue">
<input type="checkbox" checked disabled class="custom-control-input"
id="customSwitch1b">
<label class="custom-control-label" for="customSwitch1b">I am checked and
disabled</label>
</div>
v1.0.811-rev-07dbbad
