--- 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 %}
{% 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 ` |
{% 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 |