Bootstrap5 Forms

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap allows the creation of various styles of forms with simple HTML tags and extended classes.

Form elements <input>, <textarea>, and <select> elements, when using the .form-control class, are set to 100% width.

Bootstrap5 Form Layouts

• Stacked form (full-width): vertical orientation
• Inline form: horizontal orientation

Bootstrap provides two types of form layouts:

Stacked Form

The following example creates a stacked form with two input boxes, a checkbox, and a submit button:

Example

<form>
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Display effect:

In the example, we use the .form-label class to ensure that the label elements have some padding.

Checkboxes use different markup. They are wrapped around a container element using .form-check. Checkboxes and radio buttons use .form-check-input, and their labels can use the .form-check-label class.

Inline Form

If you want the form elements to display side by side, use .row and .col:

The following example displays two input boxes side by side, creating an inline form:

Example

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>

Display effect:

Textarea

Use the textarea tag to create a text box for form submission, and use the .form-control class to render the textarea tag:

Example

<label for="comment">Please enter your comment:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Display effect:

Input Size

We can set the size of the input box by using the .form-control-lg or .form-control-sm class in the .form-control input:

Example

<input type="text" class="form-control form-control-lg" placeholder="Large input box">
<input type="text" class="form-control" placeholder="Normal size input box">
<input type="text" class="form-control form-control-sm" placeholder="Small input box">

Display effect:

Disabled/Readonly Forms

Use the disabled/readonly attribute to set the input box to disabled/readonly:

Example

<input type="text" class="form-control" placeholder="Normal input">
&lt;input type="text" class="form-control" placeholder="Disabled input" disabled>
&lt;input type="text" class="form-control" placeholder="Readonly input" readonly>

Plain Text Input

Using the .form-control-plaintext class removes the border from the input field:

Example

<input type="text" class="form-control-plaintext" placeholder="Plaintext input">
<input type="text" class="form-control" placeholder="Normal input">

Color Picker

Using the .form-control-color class creates a color picker:

Example

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Display effect: