Form Layout in Bootstrap 5.3

In Bootstrap 5.3, you can create various form layouts using the grid system and predefined form classes. The grid system in Bootstrap allows you to divide the form into rows and columns, providing flexibility in arranging form elements. Here are a few common form layouts you can achieve in Bootstrap 5.3.



Basic Stack form Layout

In Bootstrap 5.3, you can create a basic stack form layout by applying the appropriate grid system and form classes. The stack layout will place form elements vertically on top of each other, providing a clean and organized form structure. Here's an example of a basic stack form layout in Bootstrap 5.3

<div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter Name" />
</div>
<div class="mb-3">
    <label for="email" class="form-label">Email Address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter Email Address" />
</div>

Form Grid

In Bootstrap 5.3, you can create form layouts using the grid system to align form elements in a responsive manner. The grid system allows you to divide the form into rows and columns, providing flexibility in arranging and organizing form elements. Here's an example of how you can create a form grid layout in Bootstrap 5.3.

The form is divided into rows using the .row class, and the form elements are placed within columns created with the .col-* classes (e.g., .col-sm-6 for half width on small screens). The .mb-3 class adds margin-bottom spacing between rows, and the .mt-3 class adds margin-top spacing to the button row.

By utilizing the grid system, you can easily create a responsive form grid layout in Bootstrap 5.3, allowing your form elements to adapt to different screen sizes.

<div class="row g-3">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name" />
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name" />
    </div>
</div>

Horizontal Form Layout

  • Use the .row class to create a row for form elements.
  • Apply the .col-* classes to divide the row into columns.
  • Use the .form-label class for labels and .form-control class for form inputs.
<form>
    <div class="row mb-3">
      <label for="email" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Email Address" />
      </div>
    </div>
    <div class="row mb-3">
      <label for="password" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Enter Password" />
      </div>
    </div>
    <fieldset class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Gender</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked />
          <label class="form-check-label" for="male"> Male </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gender" id="female" value="female" />
          <label class="form-check-label" for="female"> Female </label>
        </div>
      </div>
    </fieldset>
    <div class="row mb-3">
      <div class="col-sm-10 offset-sm-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="agree" />
          <label class="form-check-label" for="agree"> I agree Terms & Condition </label>
        </div>
      </div>
    </div>
</form>

Horizontal form Label Sizing

In Bootstrap 5.3, you can adjust the size of horizontal form labels using predefined classes. This allows you to control the visual presentation and alignment of labels within a horizontal form layout. Here's an explanation of horizontal form label sizing in Bootstrap 5.3

Bootstrap provides the following classes for horizontal form label sizing:

  • .col-form-label-sm: This class makes the labels smaller, suitable for compact form layouts.
  • .col-form-label-lg: This class makes the labels larger, ideal for emphasizing important form labels.

To use these classes, simply add them to the <label> elements within your horizontal form. Here's an example:

<div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="email" placeholder="col-form-label-sm" />
    </div>
</div>
<div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="col-form-label" />
    </div>
</div>
<div class="row">
    <label for="email" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="email" placeholder="col-form-label-lg" />
    </div>
</div>

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-10">
          <p class="text-primary fw-medium">Basic Stack Layout</p>
          <hr />
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter Name" />
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="email" placeholder="Enter Email Address" />
          </div>
          <hr class="mt-5" />
          <p class="text-primary fw-medium">Form Grid</p>

          <div class="row g-3">
            <div class="col">
              <input type="text" class="form-control" placeholder="First name" />
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Last name" />
            </div>
          </div>
          <hr class="mt-5" />
          <p class="text-primary fw-medium">Registration</p>

          <form class="row g-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 Address" />
            </div>

            <div class="col-md-6">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" placeholder="Enter Password" />
            </div>

            <div class="col-12">
              <label for="address" class="form-label">Address</label>
              <input type="text" class="form-control" id="address" placeholder="Address Line 1" />
            </div>
            <div class="col-12">
              <label for="address2" class="form-label">Address 2</label>
              <input type="text" class="form-control" id="address2" placeholder="Address Line 2" />
            </div>
            <div class="col-md-6">
              <label for="city" class="form-label">City</label>
              <input type="text" class="form-control" id="city" placeholder="Enter City Name" />
            </div>
            <div class="col-md-4">
              <label for="state" class="form-label">State</label>
              <select id="state" class="form-select">
                <option selected>Choose...</option>
                <option class="Tamilnadu">Tamilnadu</option>
                <option class="Andhra Pradesh">Andhra Pradesh</option>
                <option class="Kerala">Kerala</option>
              </select>
            </div>
            <div class="col-md-2">
              <label for="pincode" class="form-label">Pincode</label>
              <input type="text" class="form-control" placeholder="Pincode" id="pincode" />
            </div>

            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="agree" />
                <label class="form-check-label" for="agree"> I Agree all the information is correct </label>
              </div>
            </div>

            <div class="col-12">
              <button type="submit" class="btn btn-primary">Register Now</button>
            </div>
          </form>

          <hr class="mt-5" />
          <p class="text-primary fw-medium">Horizontal form</p>

          <form>
            <div class="row mb-3">
              <label for="email" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="Email Address" />
              </div>
            </div>

            <div class="row mb-3">
              <label for="password" class="col-sm-2 col-form-label">Password</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="password" placeholder="Enter Password" />
              </div>
            </div>

            <fieldset class="row mb-3">
              <legend class="col-form-label col-sm-2 pt-0">Gender</legend>
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked />
                  <label class="form-check-label" for="male"> Male </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="female" value="female" />
                  <label class="form-check-label" for="female"> Female </label>
                </div>
              </div>
            </fieldset>

            <div class="row mb-3">
              <div class="col-sm-10 offset-sm-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="agree" />
                  <label class="form-check-label" for="agree"> I agree Terms & Condition </label>
                </div>
              </div>
            </div>
          </form>

          <hr class="mt-5" />
          <p class="text-primary fw-medium">Horizontal form Label Sizing</p>

          <div class="row mb-3">
            <label for="email" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control form-control-sm" id="email" placeholder="col-form-label-sm" />
            </div>
          </div>
          <div class="row mb-3">
            <label for="email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="email" placeholder="col-form-label" />
            </div>
          </div>
          <div class="row">
            <label for="email" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control form-control-lg" id="email" placeholder="col-form-label-lg" />
            </div>
          </div>

          <hr class="mt-5" />
          <p class="text-primary fw-medium">Column sizing</p>

          <div class="row g-3">
            <div class="col-sm-7">
              <input type="text" class="form-control" placeholder="City" aria-label="City" />
            </div>
            <div class="col-sm">
              <input type="text" class="form-control" placeholder="State" aria-label="State" />
            </div>
            <div class="col-sm">
              <input type="text" class="form-control" placeholder="Zip" aria-label="Zip" />
            </div>
          </div>
          <hr class="mt-5" />
          

          <!--col end-->
        </div>
      </div>
      <!--row-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
Live Preview

Bootstrap 5.3X Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions