Basic Form
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout and more.
Form text
Form text below inputs can be styled with .form-text. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
Inline text
Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.
Disabled forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
Form controls
Form controls
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states and more.
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
Disabled
Add the Disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value.
Readonly plain text
Use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
File input
Color Picker
Datalists
Select
Default
Custom<select> menus need only a custom class, .form-select to trigger the custom styles.
Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.Multiple
Themultiple attribute is also supported:
Disabled
Add thedisabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
Checks and radios
Default Checks
Indeterminate
Checkboxes can utilize the:indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
Disabled
Add thedisabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
Radios
Switches
A switch has the markup of a custom checkbox but uses the.form-switch class to render a toggle switch. Switches also support the disabled attribute.
Inline
Group checkboxes or radios on the same horizontal row by adding.form-check-inline to any .form-check.
Toggle buttons
Create button-like checkboxes and radio buttons by using.btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed.
Radio toggle buttons
Range
Range
Create custom<input type="range"> controls with .form-range.
Disabled
Add thedisabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Min and max
Range inputs have implicit values formin and max—0 and 100, respectively.
Steps
By default, range inputs “snap” to integer values. To change this, you can specify astep value.
Input group
Basic example
Wrapping
Input groups wrap by default. You may disable this with.flex-nowrap.
Sizing
Add the relative form sizing classes to the.input-group-sm or .input-group-lg and contents within will automatically resize. Sizing on the individual input group elements isn’t supported.
Checkboxes and radios
Place any checkbox or radio option within an input group’s addon instead of text.Multiple inputs
While multiple<input>s are supported visually, validation styles are only available for input groups with a single <input>.
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.Button addons
Buttons with dropdowns
Segmented buttons
Custom select
Custom file input
Floating labels
Floating labels
Wrap a pair of<input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields.
Selects
Other than.form-control, floating labels are only available on .form-selects. They work in the same way but unlike <input>s, they’ll always show the <label> in its floated state. Selects with size and multiple are not supported.
Textareas
By default, <textarea>s with .form-control will be the same height as <input>s.
To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.Layout
Utilities mb-{size}
Margin utilities are the easiest way to add some structure to forms.Form grid row
Gutters row g-{size}
Grid System Example
Horizontal form
Create horizontal forms with the grid by adding the.row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
Horizontal form label sizing
Be sure to use.col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
Column sizing
As shown in the previous examples, our grid system allows you to place any number of.cols within a .row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-sm-7.
Inline forms
Use the.col-auto class to create horizontal layouts. The .align-items-center aligns the form elements to the middle, making the .form-checkbox align properly.
Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes.col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
Remixed with size-specific column classes
Validation
Custom styles
Custom feedback styles apply custom colors, borders, focus styles and background icons to better communicate feedback. Background icons for <select>s are only available with .form-select and not .form-control.
For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips but still provides access to the form validation APIs in JavaScript.
If using client-side validation but require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
Tooltips
If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.