How to create form grid in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Form Grid in Bootstrap Easily

To create a form grid in Bootstrap, use the row and col classes inside a <form> element to arrange form controls in columns. Combine these with Bootstrap's form classes like form-group and form-control for proper spacing and styling.

📐

Syntax

Use a <form> element containing div elements with row class to create horizontal groups. Inside each row, use col classes like col-md-6 to define column widths. Wrap each input and label inside a form-group for spacing. Inputs get the form-control class for styling.

html

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="input1">Label 1</label>
        <input type="text" class="form-control" id="input1" placeholder="Enter text">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="input2">Label 2</label>
        <input type="text" class="form-control" id="input2" placeholder="Enter text">
      </div>
    </div>
  </div>
</form>

Output

A form with two input fields side by side on medium and larger screens, stacked on smaller screens.

💻

Example

This example shows a responsive form grid with two inputs per row on medium screens and above, stacking on smaller devices. It uses Bootstrap 5 classes for layout and styling.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <form>
      <div class="row mb-3">
        <div class="col-md-6">
          <label for="firstName" class="form-label">First Name</label>
          <input type="text" class="form-control" id="firstName" placeholder="Enter first name">
        </div>
        <div class="col-md-6">
          <label for="lastName" class="form-label">Last Name</label>
          <input type="text" class="form-control" id="lastName" placeholder="Enter last name">
        </div>
      </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" placeholder="Enter email">
        </div>
        <div class="col-md-6">
          <label for="phone" class="form-label">Phone</label>
          <input type="tel" class="form-control" id="phone" placeholder="Enter phone number">
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A clean form with two input fields per row on medium+ screens, stacked vertically on smaller screens, with labels above inputs and a submit button below.

⚠️

Common Pitfalls

Not wrapping inputs and labels inside col divs causes layout issues.
Forgetting form-control class on inputs results in unstyled fields.
Using fixed widths instead of Bootstrap grid classes breaks responsiveness.
Missing row container leads to no horizontal grouping.

html

<!-- Wrong: inputs not inside columns -->
<form>
  <label for="input1">Label 1</label>
  <input type="text" id="input1">
  <label for="input2">Label 2</label>
  <input type="text" id="input2">
</form>

<!-- Right: inputs inside row and columns with form-control -->
<form>
  <div class="row">
    <div class="col-md-6">
      <label for="input1" class="form-label">Label 1</label>
      <input type="text" class="form-control" id="input1">
    </div>
    <div class="col-md-6">
      <label for="input2" class="form-label">Label 2</label>
      <input type="text" class="form-control" id="input2">
    </div>
  </div>
</form>

📊

Quick Reference

Use row to group columns horizontally.
Use col-* classes to set column widths (e.g., col-md-6 for half width on medium+ screens).
Wrap inputs and labels inside columns for proper alignment.
Add form-control to inputs for Bootstrap styling.
Use form-label on labels for consistent spacing.

✅

Key Takeaways

Use Bootstrap's grid classes row and col-* inside forms to create responsive layouts.

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

Wrap each label and input pair inside a column div for proper alignment and spacing.

Test your form on different screen sizes to ensure the grid stacks correctly on small devices.

Avoid fixed widths or missing grid containers to keep your form responsive and clean.