+++ title = "General Forms" author = "Studio KonKon" description = "Styles, layout options and general components for creating a wide variety of forms." body_class = "bg-body-secondary" [[extra_js]] src = "forms.js" [[extra_css]] src = "dev-sk-ui" type = "scss" +++ {{< add-style >}} .fcs-example > .form-control + .form-control { margin-top: .5rem; } {{< /add-style >}}
Basic Form

Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout and more.

We'll never share your email with anyone else.
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.

Your password must be 8-20 characters long, contain letters and numbers and must not contain spaces, special characters, or emoji.
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.

Must be 8-20 characters long.
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
The multiple attribute is also supported:
Disabled
Add the disabled 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 the disabled 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 the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Min and max
Range inputs have implicit values for min and max—0 and 100, respectively.
Steps
By default, range inputs “snap” to integer values. To change this, you can specify a step value.

Input group

Basic example
@
@example.com
https://example.com/users/
$ .00
@
With textarea
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.
Small
Default
Large
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>.
First and last name
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
$ 0.00
$ 0.00
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.
Radios
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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
Supported elements
Validation styles are available for the following form controls and components: