7.31. Bootstrap5 form

In this chapter, we will learn how to create a form using Bootstrap. Bootstrap can create different styles of forms with some simple HTML tags and extended classes.

Form elements, textarea, and select elements are used in the case of the .form-control class, the width is set to 100%.

7.31.1. Bootstrap5 form layout ¶

Stacked forms (full screen width): vertical
Inline forms: horizontal

Bootstrap provides two types of form layouts:

Stack form ¶

The following example uses two input boxes, a check box, and a submit buttonto create a stacked form:

7.31.2. 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 .form-label class to ensure that the tag element has a certain inner margin.

The check box (checkboxe) uses a different tag. They use the .form-check wrap around the container elements. Check boxes and radio buttons use the .form-check-input whose label can be used .form-check-label class.

Inline form ¶

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

The two input boxes of the following example are displayed side by side to create an inline form:

7.31.3. 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:

Text box ¶

Use textarea label to create a text box to submit the form, using the .form-control class render text box textareas label:

7.31.4. Example ¶

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

Display effect:

Input box size ¶

We can pass through the .form-control use in the input box .form-control-lg or .form-control-sm class to set the size of the input box

7.31.5. 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:

Disable / read-only form ¶

Use disabled/readonly Property setting input box disabled / read-only:

7.31.6. Example ¶

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

Plain text input ¶

Use .form-control-plaintext Class can delete the border of the input box:

7.31.7. Example ¶

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

Color picker ¶

Use .form-control-color Class can create a color picker:

7.31.8. Example ¶

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

Display effect: