Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Be sure to use an appropriate type attribute on all inputs (e.g.,
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.
# Form controls
# Form controls
Textual form controls—like
<textarea>s—are styled with the .form-control class.
Included are styles for general appearance, focus state, sizing, and more.
Be sure to explore our custom forms to further style
You can use the
base-input component and the default slot which will act like a div with
# Checkboxes and radios
# Radio buttons
Since Bootstrap applies
display: block and
width: 100% to almost all our form controls, forms will by default stack vertically.
Additional classes can be used to vary this layout on a per-form basis.
# Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
# Form row
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
More complex layouts can also be created with the grid system.
# Disabled forms
disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
# Caveat with anchors
By default, browsers will treat all native form controls
<fieldset disabled> as disabled,
preventing both keyboard and mouse interactions on them.
However, if your form also includes
<a ... class="btn btn-*"> elements,
these will only be given a style of pointer-events: none. As noted in
the section about disabled state for buttons (and specifically in the sub-section for anchor elements),
this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10,
and won’t prevent keyboard users from being able to focus or activate these links.
# Cross browser compatibility
While Bootstrap will apply these styles in all browsers,
Internet Explorer 11 and below don’t fully support the disabled
attribute on a
# Base Input props
# Base Checkbox props
# Base Radio props
If you want to see more examples and properties please check the official Bootstrap Documentation (opens new window).