❮ Previous Next ❯

Form Layouts

  • Design structured forms using Bootstrap layout techniques.

  • Introduction to Form Layouts

    A form layout defines how form elements are arranged on the page, not how they look or behave.

    In Bootstrap, form layouts are built using:

    • Utility classes

    • Spacing helpers

    • The Bootstrap grid system

    Good form layouts:

    • Improve readability

    • Reduce user effort

    • Work well on all screen sizes

    • Make forms easier to complete

      What Are Form Layouts ?

      Form layouts control:

      • Alignment of labels and inputs

      • Spacing between fields

      • Number of columns

      • Responsive behavior

      Bootstrap supports multiple layout approaches, but all layouts are based on the same core principle:

      Forms are structured using standard HTML + Bootstrap grid & utilities.

      Basic Form Layout

      What Is a Stacked Form ?

      A stacked form places:

      • Label above input

      • One field per row

      This is the default and most common layout, especially for mobile devices.

    Creating a Form Layout

    A stacked form places labels above inputs, with each field on a separate row for better mobile-friendly layout. 

    <form>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
  </div>
  <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control">
  </div>
  <button class="btn btn-primary">Login</button>
</form>

    • Key Points

      • .mb-3 controls spacing

      • .form-label aligns labels correctly

      • .form-control styles inputs

      • Automatically responsive

      When to Use Forms

      Use stacked forms when:

      • Designing mobile-first interfaces

      • Forms are short

      • Clarity is more important than compactness

      Horizontal Form Layout 

      What is a Horizontal Form ?

      In a horizontal form:

      • Labels and inputs appear side-by-side

      • Layout uses the grid system

      • Mostly used on larger screens

      Horizontal forms are grid-based forms, not a separate component.

      Grid-Based Forms

      What is a Grid-Based Form ?

      A grid-based form uses Bootstrap’s row and column system to:

      • Align labels and inputs

      • Create multi-column forms

      • Control layout responsively

      This is the most powerful and flexible form layout approach.

      Why Use Grid-Based Forms ?

      Grid-based forms allow you to:

      • Create professional layouts

      • Control alignment precisely

      • Adapt forms for different screen sizes

      • Build complex forms cleanly

    Creating a Grid-Based Form Layout

    A grid-based form uses .row and column classes to align labels and inputs horizontally. 

    <form>
  <div class="row mb-3">
    <label class="col-sm-3 col-form-label">Email</label>
    <div class="col-sm-9">
      <input type="email" class="form-control">
    </div>
  </div>
  <div class="row mb-3">
    <label class="col-sm-3 col-form-label">Password</label>
    <div class="col-sm-9">
      <input type="password" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-9 offset-sm-3">
      <button class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
    • Understanding the Grid-Based Form Code
      ElementPurpose
      .rowCreates a horizontal layout
      .col-sm-3Label width
      .col-sm-9Input width
      .col-form-labelVertically aligns label
      offset-sm-3Aligns button with inputs

      Responsive Behavior in Grid-Based Forms

      Bootstrap grid makes forms responsive automatically.

    Making Grid-Based Forms Responsive

    Using responsive grid classes like .col-12 and .col-md-* adjusts form layout for mobile and desktop screens automatically. 

    <label class="col-12 col-md-4 col-form-label">Name</label>
<div class="col-12 col-md-8">
  <input class="form-control">
</div>

    • Behavior:

      • Mobile: stacked

      • Desktop: side-by-side

      Multi-Column Form Layout

    Creating a Two-Column Form Layout

    Using grid columns like .col-md-6 creates a multi-column form layout on medium and larger screens. 

    <form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label">First Name</label>
      <input class="form-control">
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label">Last Name</label>
      <input class="form-control">
    </div>
  </div>
  <button class="btn btn-success">Submit</button>
</form>

    • Use case:

      • Registration forms

      • Profile forms

      • Address details

        Form Layout Best Practices

        • Start with stacked layout (mobile-first)

        • Use grid only when alignment is needed

        • Keep labels readable

        • Avoid overcrowding

        • Maintain consistent spacing

        • Do not mix layout styles randomly

          Common Mistakes

          • Forgetting .row in grid forms

          • Placing inputs directly inside .row without .col

          • Overusing multi-column layouts

          • Ignoring mobile behavior

          • Using tables for form layout 

          Forms should never be laid out using tables.
        ❮ Previous Next ❯