Bootstrap 5 Form

Stacked Forms

All <input> and <textarea> elements with the .form-control class can receive the correct form styles:

Example

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Please enter your email address" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Please enter your 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>

Try It Yourself

Additionally, please note that we have added .form-label class to ensure proper filling.

Checkboxes have different markers. They are set .form-check class. The label is set .form-check-label class, while checkboxes and radio buttons are enclosed by the container elements of .form-check-input.

Textarea

Example

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

Try It Yourself

Form row / grid (inline form)

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

Example

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

Try It Yourself

You will be Bootstrap Grid Learn more about columns and rows in this chapter.

Form Control Sizes

You can use .form-control-lg or .form-control-sm Change .form-control Size of Input Controls:

Example

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

Try It Yourself

Disabled and Read-only

Please use the disabled and/or readonly attributes to disable input fields:

Example

<input type="text" class="form-control" placeholder="Normal Input Control">
<input type="text" class="form-control" placeholder="Disabled Input Control" disabled>
<input type="text" class="form-control" placeholder="Read-only Input Control" readonly>

Try It Yourself

Plain Text Input

Please use .form-control-plaintext Use the class to set the style of input fields without borders, but retain appropriate margins and padding:

Example

<input type="text" class="form-control-plaintext" placeholder="Plain Text Input">
<input type="text" class="form-control" placeholder="Normal Input Control">

Try It Yourself

Color Picker

To correctly set the input style for type="color", please use .form-control-color Class:

Example

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

Try It Yourself