Your will discover how to use Bootstrap to design sophisticated form layouts in this lesson.
Creating Forms with Bootstrap
HTML forms are essential components of web pages and applications. However, manually creating form layouts and styling each form control using CSS can be a tedious and monotonous task. Luckily, Bootstrap simplifies this process by offering a set of pre-defined classes that handle the styling and alignment of form controls like labels, input fields, select boxes, text areas, and buttons.
Bootstrap provides three distinct form layouts:
- Vertical Form (default form layout): This layout arranges form controls in a vertical stack, with labels positioned above the corresponding controls.
- Horizontal Form: In this layout, labels and form controls are aligned side-by-side using Bootstrap's grid classes.
- Inline Form: This layout condenses the form by displaying a series of form controls and buttons in a single horizontal row.
The following section will provide a detailed overview of these form layouts, as well as various other Bootstrap components related to forms.
Creating Vertical Form Layout
To create vertical form layouts, you can simply use the pre-defined margin utility classes to group labels, form controls, optional form text, and form validation messages. An example of this layout places form controls in a vertical stack with labels on top.
In the next chapter, you will learn about custom checkboxes and other customized form controls.
The following chapters will cover custom checkboxes and other custom form controls.
Note: For textual form controls, such as
<textarea>, the required class is
<select> elements need the class
.form-select for general styling. These classes also ensure that the form controls
span 100% of their container width. To adjust their width or make them appear inline, you can leverage Bootstrap's predefined grid classes.
Tip: It is advisable to use
margin-bottom utility classes (e.g., mb-2, mb-3, etc.) to introduce vertical spacing between form groups. This approach ensures a consistent and non-collapsing form layout by applying single-direction margin throughout.
Creating Horizontal Form Layout
In addition to vertical forms, Bootstrap allows you to create horizontal form layouts. For this, you need to add the
.row class to form groups and use the
.col-*-* grid classes to specify the width of labels and controls. This aligns the labels and form controls side-by-side.
Make sure to use the class
.col-form-label on your
<label> elements to ensure they are vertically centered with their associated form controls. Let's see an example of how this works:
Creating Inline Form Layout
If you want to display a series of form controls and buttons in a single horizontal row for a more compact layout, you can easily achieve this using Bootstrap's grid classes.
Here's an example to demonstrate how it works:
To see samples of a few gorgeously created Bootstrap forms, visit the snippets area.
Tip: Including a label for every form input is recommended to ensure proper accessibility for screen readers. However, for inline form layouts, you can hide the labels using the
.visually-hidden class, making them accessible only to screen readers.
Creating Responsive Form Layout
To make your forms responsive, you can utilize the grid classes with specific breakpoints.
The following example will create a form layout that is inline on medium devices and larger (viewport width ≥768px) and becomes vertically stacked on smaller viewports.
Creating Static Form Control
In some cases, you may only need to display plain text next to a form label instead of an interactive form control.
To achieve this, simply replace the
.form-control class with
.form-control-plaintext and apply the
readonly attribute. This class removes the default styling from the form field while preserving correct margins and padding.
Column Sizing of Form Controls
If you want to match the size of your inputs, textareas, and select boxes to the Bootstrap grid column sizes, you can place these form controls (i.e.,
<select>) within grid columns.
This way, the form controls will adjust according to the specified column sizes.
Placing Checkboxes and Radio Buttons Inline
By default, with the class
.form-check, any number of custom checkboxes and radio buttons that are immediate siblings will be vertically stacked and spaced appropriately.
However, if you want to place these custom checkboxes and radio buttons inline (in the same line), you can do so by adding the class
.form-check-inline to the
Default Placement of Checkboxes
Similarly, you can also place the radio buttons inline, as shown in the following example:
Default Placement of Radio Buttons
Adding Help Text to Form Controls
To effectively guide users in entering correct data into a form, you can add help text for form controls in a well-organized manner. To place block-level help text, you can use the class
.form-text, which is typically displayed at the bottom of the form control. Here's an example:
must not include spaces and be between 8 and 20 characters long, including letters, numbers, and special characters.
Alternatively, you can use the
<small> element to add inline help text without the need for the
.form-text class. This example demonstrates how to implement it:
Must be 8-20 characters long.
Creating Disabled Form Controls
Disabling individual form controls such as
<select> is straightforward in Bootstrap. Simply add the
disabled attribute to the respective elements, and Bootstrap will handle the rest. Here's an example:
If you need to disable all controls within a
<form> at once, you can place them inside a
<fieldset> element and apply the
disabled attribute to it. The following example illustrates this:
Creating Readonly Inputs
To prevent the modification of values in an input or textarea, you can use the
readonly boolean attribute. Read-only inputs appear with a lighter background (similar to disabled inputs) but retain the standard text cursor. See the example below to understand how it works:
Height Sizing of Form Controls
You can easily adjust the height of text inputs and select boxes to match
button sizes using form control height sizing classes like
.form-control-sm. Here's an example:
Tip: For resizing labels according to form controls, use the classes
.col-form-label-sm on the
Similarly, you can create larger and smaller variants of select boxes with the
.form-select-sm classes on the
Bootstrap Form Validation
Bootstrap simplifies form validation on the client-side by utilizing the browser's native form validation API. It applies validation styles through CSS pseudo-classes
Let's see an example to understand how it works: