`s, or nearly any other element.
{% example html %}
{% endexample %}
### Grid
{% example html %}
{% endexample html %}
{% example html %}
{% endexample html %}
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
{% 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 vary slightly from their default states.
- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/) utilities.
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `
` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
{% example html %}
{% endexample %}
Custom form controls and selects are also supported.
{% example html %}
{% endexample %}
{% callout warning %}
#### Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
{% endcallout %}
### Using the Grid
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/) or [mixins]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
Be sure to add `.col-form-label` to your ``s as well so they're vertically centered with their associated form controls. For `` elements, you can use `.col-form-legend` to make them appear similar to regular `` elements.
{% example html %}
{% endexample %}
More complex layouts can also be created with the grid system.
{% example html %}
{% endexample %}
Grid-based form layouts also support large and small inputs.
{% example html %}
{% endexample %}
## Checkboxes and radios
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent ``, you'll need to add the `.disabled` class to the parent `.form-check`. The disabled class will also lighten the text color to help indicate the input's state.
### Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
### Inline
Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
### Without labels
Should you have no text within the ``, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
{% example html %}
{% endexample %}
## Static controls
If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding.
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
## Disabled states
Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
{% highlight html %}
` to disable all the controls within.
{% example html %}
{% endexample %}
{% callout warning %}
#### Caveat with anchors
By default, browsers will treat all native form controls (`` and `` elements) inside a `` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (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 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
{% endcallout %}
{% callout danger %}
#### 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 ` `. Use custom JavaScript to disable the fieldset in these browsers.
{% endcallout %}
## Readonly inputs
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
{% example html %}
Large select
Default select
Small select
{% endexample %}
## Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
{% example html %}
{% endexample %}
## Help text
Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.
{% callout warning %}
#### Associating help text with form controls
Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
{% endcallout %}
### Block level
Block help text—for below inputs or for longer lines of help text—can be easily achieved with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
{% example html %}
Password
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
{% endexample %}
### Inline
Inline text can use any typical inline HTML element (be it a ``, ``, or something else).
{% example html %}
{% endexample %}
## Validation
Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
{% callout warning %}
We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers.
{% endcallout %}
### How it works
Here's a rundown of how form validation works:
- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, on ``, and `