Forms in Bootstrap 5

Bootstrap Forms

Bootstrap includes many classes and utilities for creating forms with various styles and layouts.

Here are some of the most commonly used classes for Bootstrap forms:

• .form-control: This class applies Bootstrap styles to form elements like input, select, and textarea. It gives them a uniform appearance across all browsers.

• .form-group: This class is used to group form elements like input, select, and label. It provides consistent spacing and alignment for form controls.

• .form-label: This class is used to style the label element for form controls. It makes the label text bold and increases its size.

• .form-text: This class is used to add helper text below form controls. It provides additional information about the form control.

• .form-check: This class is used to create checkbox and radio button inputs. It provides consistent styling for these types of inputs.

• .form-range: This class is used to create range inputs. It provides consistent styling for these types of inputs.

• .form-select: This class is used to create select inputs. It provides consistent styling for these types of inputs.

• .form-floating: This class is used to create floating labels for form controls. It makes the label appear inside the form control.

As an example:

Editor

Loading...

In this example:

• We've used the form-group class to group form controls and the form-label class to style the label elements.
• We've also used the form-control class to style the input, select, and textarea elements, and the btn and btn-primary classes to style the submit button.

Textarea

Bootstrap provides a class called .form-control that can be used to style the textarea element in a consistent way with other form elements.

As an example:

<label for="message" class="form-label">Message:</label>
<textarea
     class="form-control"
     id="message"
     name="message"
     rows="4"
     placeholder="Enter your message"
></textarea>

In this example:

• We've added the .form-label class to the label element to style it according to the Bootstrap form label style.
• We've also added the .form-control class to the textarea element to apply the Bootstrap 5 form control styles.
• We've set the rows attribute to 4 to determine the number of rows visible in the textarea, and added a placeholder attribute to provide an example message.

Bootstrap also provides a class called .form-floating that can be used to create floating labels for form controls, including textarea elements.

As an example:

<div class="form-floating">
     <textarea
          class="form-control"
          id="message"
          name="message"
          rows="4"
          placeholder="Enter your message"
     ></textarea>
     <label for="message">Message</label>
</div>

In this example:

• We've wrapped the textarea element and the label element in a <div> element with the .form-floating class.
• This class adds the floating label effect to the label element.

Form Row/Grid (Inline Forms)

Inline forms place form controls side-by-side on a single line, which can be useful for forms with few fields or for compact designs.

As an example:

Editor

Loading...

In this example:

• We've wrapped the form controls in a <div> element with the .row class.
• This creates a flex container that will place the form controls side-by-side.
• We've used the .col-auto class on each form control to specify that they should take up only as much width as needed.
• We've also added a label element with the .visually-hidden class to each form control to provide screen reader support without adding visible labels.

Form Control Size

Bootstrap 5 provides several classes that can be used to adjust the size of form controls. These classes are useful for creating forms with varying levels of emphasis or for fitting forms into different layouts.

Here are the available classes for sizing form controls:

• .form-control-lg: This class increases the height and font size of form controls to create a larger size.
• .form-control-sm: This class decreases the height and font size of form controls to create a smaller size.

As an example:

<label for="input-lg" class="form-label">Large Input</label>
<input
     type="text"
     class="form-control form-control-lg"
     id="input-lg"
     placeholder="Large input"
/>

<label for="input-default" class="form-label">Default Input</label>
<input
     type="text"
     class="form-control"
     id="input-default"
     placeholder="Default input"
/>

<label for="input-sm" class="form-label">Small Input</label>
<input
     type="text"
     class="form-control form-control-sm"
     id="input-sm"
     placeholder="Small input"
/>

In this example:

• We've added the .form-control-lg class to the first input element to make it larger than the default size.
• We've also added the .form-control-sm class to the third input element to make it smaller than the default size.

Disabled and Readonly

You can disable or make form controls read-only by using the disabled and readonly attributes, respectively.

As an example:

<label for="disabled-input" class="form-label">Disabled Input</label>
<input
     type="text"
     class="form-control"
     id="disabled-input"
     placeholder="Disabled input"
     disabled
/>

<label for="readonly-input" class="form-label">Readonly Input</label>
<input
     type="text"
     class="form-control"
     id="readonly-input"
     placeholder="Readonly input"
     readonly
/>

In this example:

• We've added the disabled attribute to the first input element to disable it, and the readonly attribute to the second input element to make it read-only.

tip

Both attributes are boolean attributes, which means they do not require a value.