Forms
Bootstrap 5 Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
This is a general overview with a summary of the most fundamental knowledge. For the more detailed information regarding specific form, types have a look at the dedicated documentation pages.
Basic example
A basic example of a simple login form with input fields (email and password), checkbox and submit button.
Checkbox and "forgot password" link are positioned inline by using 2 column grid layout.
Note: Most of the demo examples have a fixed width for the
demo purpose.
Included code examples do not have a fixed width, so they'll naturally fill
the full width of its parent element.
To control the width of the form place it in the grid, use the sizing utilities, or set the
width inline.
Every group of form fields should reside in a <form>
element. MDB provides
no default styling for the <form>
element, but there are some powerful
browser features that are provided by default.
- New to browser forms? Consider reviewing the MDN form docs for an overview and complete list of available attributes.
-
<button>
s within a<form>
default totype="submit"
, so strive to be specific and always include atype
. -
You can disable every form element within a form with the
disabled
attribute on the<form>
.
Since MDB applies display: block
and width: 100%
to almost all our
form controls, forms will by default stack vertically. Additional classes can be used to vary
this layout on a per-form basis.
Examples
Login form
Typical login form with additional register buttons.
Register form
Typical register form with additional register buttons.
Contact form
Typical contact form with textarea input as a message field.
Subscription form
A typical subscription form used when subscribing to the newsletter.
Checkout form
An example of the extended form with typical checkout inputs.
Login-register
By using pills you can place login and register forms into a single component.
Layout
There are multiple ways to structure forms and provide them the desired layout. Have a look at the examples below to learn more about forms layout.
Utilities
Margin utilities are the easiest way to add
some structure to forms. They provide basic grouping of labels, controls, optional form
text, and form validation messaging. We recommend sticking to
margin-bottom
utilities, and using a single direction throughout the form for
consistency.
Feel free to build your forms however you like, with
<fieldset>
s, <div>
s, or nearly any other element.
In the example below, we add .mb-4
class to provide a proper margin between two
input fields.
Form grid
More complex forms can be built using our
grid classes. Use these for form layouts that
require multiple columns, varied widths, and additional alignment options.
Requires the $enable-grid-classes
Sass variable to be enabled
(on by default).
Gutters
By adding gutter modifier classes, you can have control over the gutter width in as well the
inline as block direction.
Also requires the $enable-grid-classes
Sass variable to be enabled
(on by default).
Column sizing
As shown in the previous examples, our grid system allows you to place any number of
.col
s 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 .col
s equally split the rest, with specific column classes
like .col-sm-7
.
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.
Inline forms
Use the .row-cols-*
classes to create responsive horizontal layouts. By adding
gutter modifier classes,
we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the
.col-12
helps stack the form controls and more. The
.align-items-center
aligns the form elements to the middle, making the
.form-checkbox
align properly.