Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. Show OverviewBootstrap’s form controls expand on our 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 Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Form controlsTextual form controls—like Be sure to explore our custom forms to further style Email address Example select Example multiple select Example textarea
For file inputs, swap the
SizingSet heights using classes like
ReadonlyAdd the
Readonly plain textIf you want to have
Range InputsSet horizontally scrollable range inputs using
Checkboxes and radiosDefault checkboxes and radios are improved upon with the help of Disabled checkboxes and radios are supported. The Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our Default (stacked)By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and
appropriately spaced with Default checkbox Disabled checkbox
Default radio Second default radio Disabled radio
InlineGroup checkboxes or radios on the same horizontal row
by adding
Without labelsAdd
LayoutSince Bootstrap applies Form groupsThe
Form gridMore 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 rowYou may also swap
More complex layouts can also be created with the grid system.
Horizontal formCreate horizontal forms with the grid by adding the At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed
the
Horizontal form label sizingBe sure to use
Column sizingAs shown in the previous examples, our grid system allows you to place any number of
Auto-sizingThe example below uses a flexbox utility to vertically center the contents and changes
You can then remix that once again with size-specific column classes.
And of course custom form controls are supported.
Inline formsUse the
You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a
Custom form controls and selects are also supported.
Alternatives to hidden labelsAssistive 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 Help textBlock-level help text in forms can be created using Associating help text with form controlsHelp text should be explicitly associated with the form control it relates to using the Help text below inputs can be styled with Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Inline text can use any typical inline HTML element (be it a
Disabled formsAdd the
Add the
Caveat with anchorsBy default, browsers will treat all native form controls ( Cross-browser compatibilityWhile Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the ValidationProvide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile). How it worksHere’s how form validation works with Bootstrap:
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. Custom stylesFor custom Bootstrap form validation messages, you’ll need to add the Custom feedback styles apply custom colors,
borders, focus styles, and background icons to better communicate feedback. Background icons for
Browser defaultsNot interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback. While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
Server sideWe recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with
Supported elementsValidation styles are available for the following form controls and components:
TooltipsIf your form layout allows it, you can swap the
CustomizingValidation states can be customized via Sass with the Please note that we do not recommend customizing these values without also modifying the
Custom formsFor even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control. Checkboxes and radiosEach checkbox and radio We use the sibling selector ( We hide the default In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices. CheckboxesCheck this custom checkbox
Custom checkboxes can also utilize the Check this custom checkbox If you’re using jQuery, something like this should suffice:
RadiosToggle this custom radio Or toggle this other custom radio
InlineToggle this custom radio Or toggle this other custom radio
DisabledCustom checkboxes and
radios can also be disabled. Add the Check this custom checkbox Toggle this custom radio
SwitchesA switch has the markup of a custom checkbox but uses the Toggle this switch element Disabled switch element
Custom
You may also choose from small and large custom selects to match our similarly sized text inputs.
The
As is the
RangeCreate custom Example range
Range inputs have implicit values for Example range
By default, range inputs “snap” to integer values. To change this, you can specify a Example range
File browserThe recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs. The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
We hide the default file Translating or customizing the strings with SCSSThe
Here’s
You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the Translating or customizing the strings with HTMLBootstrap also provides a way to translate the “Browse” text in HTML with the |