Form
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms on BootstrapOverview
Bootstrap’s form controls expand on their 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.
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Basic Form
<form>
<div class="mb-3"><label class="form-label" for="exampleInputEmail1">Email address</label><input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" />
<div class="form-text" id="emailHelp">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3"><label class="form-label" for="exampleInputPassword1">Password</label><input class="form-control" id="exampleInputPassword1" type="password" /></div>
<div class="mb-3 form-check"><input class="form-check-input" id="exampleCheck1" type="checkbox" /><label class="form-check-label" for="exampleCheck1">Check me out</label></div><button class="btn btn-primary" type="submit">Submit</button>
</form>