--- layout: docs title: Forms group: components --- Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Form controls Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**. {% example html %}
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
{% endexample %} Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
Classes Used for Supported variations
{% markdown %}`.form-group`{% endmarkdown %} Any group of form controls {% markdown %}Use with any block-level element like `
` or `
`{% endmarkdown %}
{% markdown %}`.form-control`{% endmarkdown %} Textual inputs {% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
Select menus {% markdown %}`multiple`, `size`{% endmarkdown %}
Textareas N/A
{% markdown %}`.form-control-file`{% endmarkdown %} File inputs {% markdown %}`file`{% endmarkdown %}
{% markdown %} `.form-check`
`.form-check-inline` {% endmarkdown %}
Checkboxes and radios N/A
### Textual inputs Here are examples of `.form-control` applied to each textual HTML5 `` `type`. {% example html %}
{% endexample %} ## Form layouts 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 groups The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `
`s, `
`s, or nearly any other element. {% example html %}
{% endexample %} ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently: - Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`. - Controls receive `width: auto` to override the Bootstrap default `width: 100%`. - Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices. Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `