Skip to content

Bootstrap Forms

Bootstrap provides consistent styling and layout tools for forms. This lesson covers the fundamental building blocks: labels, controls, help text, and grid-based form layout.

Bootstrap Forms Overview

A Bootstrap form starts with the native <form> element combined with .form-label for labels, .form-control for text inputs, textareas, and selects, and .form-text for helper text. These classes normalize spacing, borders, and focus states across browsers.

For layout, forms use the same grid system as the rest of Bootstrap—rows and columns—to arrange fields side by side, or utility classes like mb-3 to stack fields vertically with consistent spacing.

Concept Description Common Usage
.form-label Styled label element Associating text with an input via for/id
.form-control Styled text input, textarea, or select Standard text-based form fields
.form-text Small muted helper text below a field Hints, instructions, character limits
Grid-based form layout Row/col classes applied to form groups Multi-column forms like name/email side by side
mb-3 spacing convention Standard vertical spacing between fields Consistent field spacing without custom CSS

Bootstrap Forms Example

<form>
  <div class="mb-3">
    <label for="fullName" class="form-label">Full name</label>
    <input type="text" class="form-control" id="fullName" placeholder="Jane Doe">
  </div>

  <div class="row mb-3">
    <div class="col-md-6">
      <label for="email" class="form-label">Email</label>
      <input type="email" class="form-control" id="email">
    </div>
    <div class="col-md-6">
      <label for="phone" class="form-label">Phone</label>
      <input type="tel" class="form-control" id="phone">
      <div class="form-text">Optional, used for order updates only.</div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The full name field stacks vertically with standard mb-3 spacing. The email and phone fields sit side by side on medium screens and up using the grid system, and the phone field includes helper text explaining why it's collected.

Top 10 Bootstrap Forms Examples

These are the foundational form classes you'll use to build almost every Bootstrap form.

# Example Syntax
1 Text input <input type="text" class="form-control">
2 Form label <label class="form-label" for="name">Name</label>
3 Textarea <textarea class="form-control" rows="3"></textarea>
4 Select dropdown <select class="form-select"><option>Choose...</option></select>
5 Helper text <div class="form-text">We never share your email.</div>
6 Field spacing wrapper <div class="mb-3">...</div>
7 Two-column field row <div class="row"><div class="col-md-6">...</div></div>
8 Disabled input <input class="form-control" disabled>
9 Readonly input <input class="form-control" value="Fixed" readonly>
10 Submit button <button type="submit" class="btn btn-primary">Submit</button>

Best Practices

  • Always pair a for attribute on the label with a matching id on the input for accessibility.
  • Use mb-3 (or a similar spacing utility) consistently between form groups for visual rhythm.
  • Use the grid system for multi-column forms instead of custom flexbox or float layouts.
  • Add form-text for any field that benefits from extra context, like password requirements.
  • Use appropriate input types (email, tel, number) so browsers provide the right keyboard and validation.
  • Keep required fields visually marked and communicate requirements in helper text.
  • Group related fields (like address lines) visually close together with consistent spacing.

Common Mistakes

  • Omitting the label's for attribute, breaking the label-to-input association for screen readers.
  • Using plain <input> without .form-control, resulting in unstyled, inconsistent fields.
  • Forgetting to wrap multi-column fields in a row so they don't align correctly.
  • Inconsistent spacing between fields because mb-3 isn't applied uniformly.
  • Using div elements instead of a real <form> element, losing native submission and validation behavior.
  • Not setting the correct input type, resulting in the wrong mobile keyboard for the field.

Key Takeaways

  • form-label, form-control, and form-text are the core building blocks of Bootstrap forms.
  • Forms use the same row/column grid as page layouts for multi-column arrangements.
  • Consistent spacing utilities like mb-3 create visual rhythm between fields.
  • Correct input types improve both usability and built-in browser validation.
  • Accessible label-to-input association is essential and easy to overlook.

Pro Tip

Build a reusable form-group snippet (label + input + helper text) in your editor so every new field in a project starts with consistent structure and spacing.

You now understand how to structure Bootstrap forms. Continue to Bootstrap Form Controls to explore individual control types in depth.