How to style form in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Style Forms in Bootstrap: Simple Guide with Examples

To style a form in Bootstrap, use the form-control class on input elements for consistent styling and spacing. Wrap inputs and labels inside mb-3 or use Bootstrap's grid system for layout and add classes like form-check for checkboxes and radios.

📐

Syntax

Bootstrap uses specific classes to style form elements. Use form-control on inputs, selects, and textareas for uniform appearance. Group related inputs and labels inside mb-3 for spacing. Use form-check for checkboxes and radios. Layout can be controlled with Bootstrap's grid classes like row and col.

html

<form>
  <div class="mb-3">
    <label for="inputEmail" class="form-label">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="inputPassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkRemember">
    <label class="form-check-label" for="checkRemember">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

Output

A styled form with labeled email and password fields, a checkbox, and a blue submit button, all spaced nicely.

💻

Example

This example shows a simple Bootstrap form with email, password, a checkbox, and a submit button. It uses form-control for inputs, form-check for the checkbox, and spacing classes like mb-3 and mt-3 for margin.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="mb-3">
        <label for="emailInput" class="form-label">Email address</label>
        <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
      </div>
      <div class="mb-3">
        <label for="passwordInput" class="form-label">Password</label>
        <input type="password" class="form-control" id="passwordInput" placeholder="Password">
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="rememberCheck">
        <label class="form-check-label" for="rememberCheck">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary mt-3">Submit</button>
    </form>
  </div>
</body>
</html>

Output

A clean, responsive form with labeled email and password fields, a checkbox, and a blue submit button, spaced with margins.

⚠️

Common Pitfalls

Common mistakes when styling forms in Bootstrap include:

Forgetting to add form-control to inputs, which results in unstyled fields.
Not wrapping inputs and labels in spacing classes like mb-3, causing cramped layout.
Using form-group class in Bootstrap 5, which is replaced by spacing utilities.
Not associating labels with inputs using for and id, hurting accessibility.

html

<!-- Wrong: missing form-control and spacing -->
<form>
  <label>Email</label>
  <input type="email">
  <button>Submit</button>
</form>

<!-- Right: with form-control and spacing -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button class="btn btn-primary">Submit</button>
</form>

📊

Quick Reference

Input fields: Use form-control class.
Labels: Use form-label and link with for attribute.
Checkboxes/radios: Use form-check, form-check-input, and form-check-label.
Spacing: Use margin utilities like mb-3 for vertical spacing.
Buttons: Use btn and color classes like btn-primary.

✅

Key Takeaways

Always add the form-control class to inputs for Bootstrap styling.

Use spacing classes like mb-3 to keep form elements nicely spaced.

Wrap checkboxes and radios with form-check classes for proper styling.

Link labels to inputs with for and id for accessibility.

Use Bootstrap buttons classes like btn and btn-primary for styled buttons.