Form layout (inline, horizontal) in Bootsrap

Introduction

Forms help users enter information. Different layouts make forms easier to use and look nice on different screens.

When you want a compact form that fits in one line, like a search box.

When you want labels and inputs side by side for better readability on wide screens.

When you want to save vertical space on a page with many form fields.

When you want a clean, organized look for forms on desktop devices.

When you want the form to adjust nicely on small screens using responsive design.

Syntax

Bootsrap

/* Inline form */
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label for="inputEmail" class="visually-hidden">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
  </div>
  <div class="col-12">
    <label for="inputPassword" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

/* Horizontal form */
<form>
  <div class="row mb-3">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Use row-cols-lg-auto and g-3 classes for inline forms to keep inputs aligned and spaced.

For horizontal forms, use Bootstrap grid classes like col-sm-2 for labels and col-sm-10 for inputs to align them side by side.

Examples

This is a simple inline form with a search box and a button aligned horizontally.

Bootsrap

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label for="search" class="visually-hidden">Search</label>
    <input type="search" class="form-control" id="search" placeholder="Search">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-secondary">Go</button>
  </div>
</form>

This horizontal form uses a wider label column and input column for better spacing.

Bootsrap

<form>
  <div class="row mb-3">
    <label for="username" class="col-sm-3 col-form-label">Username</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="username" placeholder="Username">
    </div>
  </div>
  <div class="row mb-3">
    <label for="password" class="col-sm-3 col-form-label">Password</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-sm-9 offset-sm-3">
      <button type="submit" class="btn btn-success">Login</button>
    </div>
  </div>
</form>

Sample Program

This page shows two Bootstrap forms: one inline and one horizontal. Both forms have email and password fields with a sign-in button. The inline form arranges inputs side by side in a compact row. The horizontal form aligns labels and inputs side by side using grid columns.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Layouts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
  <h2>Inline Form</h2>
  <form class="row row-cols-lg-auto g-3 align-items-center mb-5" aria-label="Inline sign in form">
    <div class="col-12">
      <label for="inlineEmail" class="visually-hidden">Email</label>
      <input type="email" class="form-control" id="inlineEmail" placeholder="Email" required>
    </div>
    <div class="col-12">
      <label for="inlinePassword" class="visually-hidden">Password</label>
      <input type="password" class="form-control" id="inlinePassword" placeholder="Password" required>
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </form>

  <h2>Horizontal Form</h2>
  <form aria-label="Horizontal sign in form">
    <div class="row mb-3">
      <label for="horizontalEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="horizontalEmail" placeholder="Email" required>
      </div>
    </div>
    <div class="row mb-3">
      <label for="horizontalPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="horizontalPassword" placeholder="Password" required>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-sm-10 offset-sm-2">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Use visually-hidden class on labels in inline forms to keep them accessible but hidden visually.

Horizontal forms use Bootstrap grid to align labels and inputs side by side, improving readability on wider screens.

Both layouts are responsive and adjust well on small screens, stacking inputs vertically if needed.

Summary

Inline forms place inputs and buttons in one row for compactness.

Horizontal forms align labels and inputs side by side using grid columns.

Both layouts improve form usability and appearance depending on the context.

Practice

1. What is the main purpose of using an inline form layout in Bootstrap?

easy

A. To hide form labels and only show inputs

B. To stack form controls vertically with labels on top

C. To place form controls and buttons in a single horizontal row for compactness

D. To create a multi-step form wizard

Solution

1. Step 1: Understand inline form layout

   Inline forms arrange inputs and buttons side by side in one row to save space.

2. Step 2: Compare with other layouts

   Unlike vertical or horizontal forms, inline forms keep everything compact horizontally.

3. Final Answer:

   To place form controls and buttons in a single horizontal row for compactness -> Option C

4. Quick Check:

   Inline form = compact horizontal layout [OK]

Hint: Inline forms put inputs and buttons in one row [OK]

Common Mistakes:

• Confusing inline with vertical stacking
• Thinking inline hides labels
• Assuming inline creates multi-step forms

2. Which Bootstrap class is used to create a horizontal form layout?

easy

A. .form-horizontal

B. .form-control

C. .form-row

D. .form-inline

Solution

1. Step 1: Identify horizontal form class

   Bootstrap uses .form-horizontal to align labels and inputs side by side.

2. Step 2: Differentiate from other classes

   .form-inline is for inline forms; .form-control styles inputs; .form-row is for grid rows.

3. Final Answer:

   .form-horizontal -> Option A

4. Quick Check:

   Horizontal form = .form-horizontal [OK]

Hint: Horizontal forms use .form-horizontal class [OK]

Common Mistakes:

• Using .form-inline for horizontal layout
• Confusing .form-control with layout classes
• Thinking .form-row alone creates horizontal forms

3. What will be the visual result of this Bootstrap form snippet?

<form class="form-inline">
  <label for="email" class="mr-2">Email</label>
  <input type="email" class="form-control mr-2" id="email" placeholder="Enter email">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

medium

A. Form controls are stacked but labels are missing

B. Label appears above input, button below input vertically

C. Only the button is visible, label and input are hidden

D. Label, input, and button appear side by side in one horizontal row

Solution

1. Step 1: Analyze form class

   The form uses form-inline, which arranges controls horizontally.

2. Step 2: Check elements and spacing

   Label, input, and button have margin classes to separate them horizontally in one row.

3. Final Answer:

   Label, input, and button appear side by side in one horizontal row -> Option D

4. Quick Check:

   form-inline = horizontal row layout [OK]

Hint: form-inline means all controls in one row [OK]

Common Mistakes:

• Expecting vertical stacking with form-inline
• Ignoring margin classes causing cramped layout
• Thinking labels are hidden in inline forms

4. Identify the error in this horizontal form snippet:

<form class="form-horizontal">
  <label class="col-sm-2 control-label" for="name">Name</label>
  <input type="text" class="form-control col-sm-10" id="name" placeholder="Name">
</form>

medium

A. Label should not have control-label class

B. Input should be wrapped inside a <div class="col-sm-10"> for proper grid layout

C. Form must use form-inline instead of form-horizontal

D. Input is missing the form-group class

Solution

1. Step 1: Understand horizontal form grid

   In Bootstrap horizontal forms, inputs must be inside grid columns wrapped in a div for alignment.

2. Step 2: Check snippet structure

   The input has the column class but is not wrapped in a div, breaking the grid layout.

3. Final Answer:

   Input should be wrapped inside a <div class="col-sm-10"> for proper grid layout -> Option B

4. Quick Check:

   Horizontal form inputs need column div wrappers [OK]

Hint: Wrap inputs in column divs for horizontal forms [OK]

Common Mistakes:

• Adding column classes directly to inputs without wrapper
• Removing control-label class from labels
• Confusing form-inline with form-horizontal

5. You want a responsive horizontal form where labels take 3 columns and inputs take 9 columns on medium screens and above, but stack vertically on small screens. Which Bootstrap classes should you use?

hard

A. Use col-md-3 on labels and col-md-9 wrapped in div on inputs inside a form-horizontal

B. Use col-sm-3 on labels and col-sm-9 on inputs without wrappers

C. Use form-inline with col-3 on labels and col-9 on inputs

D. Use form-horizontal with fixed pixel widths on labels and inputs

Solution

1. Step 1: Choose breakpoint classes for responsiveness

   Using col-md-3 and col-md-9 applies columns on medium screens and larger, stacking on smaller.

2. Step 2: Wrap inputs in a div with column class inside form-horizontal

   This ensures proper horizontal alignment and responsive stacking.

3. Final Answer:

   Use col-md-3 on labels and col-md-9 wrapped in div on inputs inside a form-horizontal -> Option A

4. Quick Check:

   Responsive horizontal form = col-md-* + wrappers + form-horizontal [OK]

Hint: Use col-md-* classes with wrappers for responsive horizontal forms [OK]

Common Mistakes:

• Using col-sm-* classes causing stacking too early
• Not wrapping inputs in divs with column classes
• Using form-inline for horizontal responsive layout