Open In App
Related Articles

Bootstrap 5 Forms Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bootstrap 5 Forms facilitates the different form control styles, layout options, and custom components, in order to generate a wide variety of forms. The complete list of Forms Components is listed below with their brief description.

Overview

To make the user interface more presentable, use properties like padding, and margins as per the need.

Topic

Description

Form textOverview Form Text sits below the form input elements to guide the user on how to fill in the input.
Disabled formsIn Bootstrap, you can easily disable input in a form and stop it from interacting by using the disabled attribute.

Form Controls

Form controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to input field, select items, and text-areas, etc.

Topic

Description

SizingForm controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.
DisabledForm controls Disabled are used to create a disabled input field.
ReadonlyForm Controls Readonly is used to create a read-only input field.
Readonly plain textForm Controls Readonly plain text is used to create a readonly input field as plaintext.
File inputForm controls File input provides customized ways to take the input of the files
ColorForm Control Color is used to set the color in the color type input field.
DatalistsForm controls datalists are used to create a group of options
SassForm controls can be used to change the default values provided for the Form controls by customizing scss file of Bootstrap 5.

Select

The Select form is used to create customized select elements with custom CSS that change the element’s initial appearance.

Topic

Description

DefaultSelect Default is used to provide the user with a list of options from which a single option can be selected.
SizingAs the name suggests sizing means to adjust the size of an element relative to its parent with the help of height and width utilities(in px or in %).
DisabledSelect is a great component that helps us to add options that can be used inside a form as a field.
SassSASS can be used to change the default values provided for the select menus by customizing scss file.

Checks and Radios

This utility is used for creating checkboxes and radio without using CSS.

Topic

Description

ChecksA checks box is a square box that is ticked when it is activated.
IndeterminateThe :indeterminate pseudo-classes can be used by the Checkboxes while manually setting via JavaScript.
RadiosThis is a feature provided to the user to choose from a predefined set of options.
DisabledChecks and radios Disabled are used to make a checkbox/radio disabled, which means we won’t be able to click on it. Its appearance will also get muted.
SwitchesChecks and radios Switches are used to transform the Checks and Radio Inputs into switches.
Default (stacked)Checks and radios Default (stacked) is used to create a stack of checks and radios as a list.
Inlinebootstrap 5 Checks and radios Inline can be used to align the checkbox or radio horizontally in the same line.
Without labelsChecks and radios are a way to take boolean-type values easily.
Toggle buttonsButtons Toggle states are used to change the button states.
Checkbox toggle buttonsThere are three toggle states, the first is checked followed by unchecked and disabled which all can be done by adding or not adding some attributes.
Radio toggle buttonsChecks and Radios Radio Toggle Buttons use buttons instead of round-shaped radio buttons.
Outlined stylesChecks and radios with outlined styles for different looks, designs,s and background colors.
SassBootstrap 5 provides various SASS variables that can be used to customize the variables by using different CSS properties.

Range

The Range is the limit slider between values that can vary.

Topic

Description

DisabledForm controls Disabled are used to create a disabled input field.
Min and maxRange Min and Max attributes are used for altering the minimum and maximum values of the range.
StepsRange Step is the factor by which the value of the range input will increment or decrement in one step.
SassSASS has a set of variables with default values that can be changed to customize the container.

Input group

Input Group allows extending the default form controls easily by incorporating text, buttons

Topic

Description

WrappingInput group Wrapping help to extend form controls by adding text, or buttons on either side of textual inputs.
SizingInput Group sizing helps us to create input groups of small, large, or default sizes.
Checkboxes and radiosInput group Checkboxes and radios are used to pace the radios and checkboxes within an input group’s addon instead of text.
Multiple inputsInput Group Multiple Inputs help to take multiple inputs in an input group.
Multiple addonsInput group Multiple addons help to add multiple items in an input group which may include text, button, input, checkbox, radio, etc.
Button addonsInput Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Buttons with dropdownsInput group Buttons with dropdowns are used to display a button along with an input group.
Segmented buttonsInput group Segmented buttons used to segment dropdowns in input groups use the same general style as the dropdown button.
Custom formsInput group Custom forms are extended form controls, used to collect specific information from visitors on your website.
Custom selectInput Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Custom file inputInput Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
SassBootstrap 5 provides the various variables in SASS that can be used to customize & manipulate the pre-defined Bootstrap classes.

Floating labels

Floating labels are the form labels that float over the input fields.

Topic

Description

TextareasA Floating Label is used to give a beautiful-looking floating label to input elements
SelectsFloating labels Component Selects is used to give a floating label to input fields.
LayoutFloating labels Layout is useful when we are working with the grid system, so we have to place form elements within column classes.
SassFloating labels can be used to change the default values provided for the floating label by customizing SCSS file of bootstrap5.

Layout

Bootstrap 5 provides various form layouts that can structure from inline to horizontal to custom grid implementations with customized options.

Topic

Description

FormsLayout forms provide control of the input field and custom positioning.
UtilitiesLayout Utilities are used for creating mobile-friendly and responsive websites, there are many utility classes that can be used for various modifications such as showing, hiding, aligning, and spacing content.
Form gridLayout Form Grid is used to create a complex form using grid classes.
GuttersGutters are the gaps between the columns in Bootstrap’s grid layout.
Horizontal formBootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls.
Horizontal form label sizingLayout Horizontal form label sizing is used to set the label of the form input field in different sizes.
Column sizingLayout Column sizing is used to set the width of the column element.
Auto-sizinglayout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically.
Inline formsLayout Inline forms consist of a responsive horizontal layout.

Validation

The Validation facilitates form validation in HTML5, in order to provide valuable & actionable feedback to the users, along with supporting the default browser behaviors, custom styles, and JavaScript.

Topic

Description

Custom stylesIt is used to add custom styles of bootstrap5 in your code.
Browser defaultsValidation Browser defaults provide feedback by browser default behaviors.
Server sideThe validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript.
Supported elementsValidation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory.
TooltipsValidation Tooltips are used to provide interactive textual hints to the user about the requirements to submit the form.
SASSThe SASS variables in Bootstrap 5 can be used to customize the pre-defined variables.
MixinsThe Mixins can be used to create the form validation feedback styles.
MapThe  _variables.scss provides the validation Sass map, in order to override or extend it to create the generate different or additional states.
LoopThis can be used to iterate the  $form-validation-states map values, in order to create the validation styles.
CustomizingThe customization can be done with Validation states with the help of the $form-validation-states map.


Last Updated : 15 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads