Forms

Forms

Bootstrap 5 provides styled form controls. The default input class is .form-control. Form controls use the classes on input, textarea, and select elements.

Text input

<div class="mb-3">
  <label for="name" class="form-label">Name</label>
  <input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>

Textarea

<div class="mb-3">
  <label for="comment" class="form-label">Comment</label>
  <textarea class="form-control" id="comment" rows="3"></textarea>
</div>

Select menu

<div class="mb-3">
  <label for="sel" class="form-label">Select list</label>
  <select class="form-select" id="sel">
    <option>One</option>
    <option>Two</option>
  </select>
</div>

Form layout

• .mb-3 adds margin below each field group.
• .form-label styles the label.
• Wrap fields in .row with .col-* classes to place them side by side.

Grid layout example

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

Sizing

• .form-control-lg large input.
• .form-control-sm small input.

<input type="text" class="form-control form-control-lg" placeholder="Large">

TL;DR

• Use .form-control for text inputs and textareas.
• Use .form-select for select menus.
• Use .form-label for labels.
• .mb-3 adds spacing between fields.
• .form-control-lg and .form-control-sm change size.