What is Form layout (inline, horizontal) in Bootsrap?

Bootsrapmarkup~5 mins

Form layout (inline, horizontal) in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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>

OutputSuccess

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.