MENU


Layout

Define a grid of rows and columns to manage the layout of form controls.

You can define a <form> element as a row of columns.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <form class="row">
      <div class="col-sm-6 mb-3">
         <label for="emailInput" class="form-label">Email</label>
         <input type="email" class="form-control"id="emailInput">
      </div>
      <div class="col-sm-6 mb-3">
         <label for="pwdInput" class="form-label">Password</label>
         <input type="password" class="form-control" id="pwdInput">
      </div>
      <div class="col-12 mb-3">
         <label for="addressInput" class="form-label">Address</label>
         <input type="text" class="form-control" id="addressInput" placeholder="1234 Main St">
      </div>
      <div class="col-12">
         <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
   </form>

</body><html>
A <form> element can contain multiple rows too.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

<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">
        </div>
    </div><button type="submit" class="btn btn-primary">
    Sign in</button></form>

</body><html>
<div> can be used in place of <form>. You can make the form labels and input boxes smaller or bigger.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

<div class="row mb-3">
  <label for="colFormLabelSm"
        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="colFormLabelSm" placeholder="col-form-label-sm">
  </div></div><div class="row mb-3">
  <label for="colFormLabel"
      class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10"><input type="email" class="form-control"
    id="colFormLabel" placeholder="col-form-label">
  </div></div><div class="row">
  <label for="colFormLabelLg"
      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="colFormLabelLg" placeholder="col-form-label-lg">
  </div></div>

</body><html>
Use the .col-auto class to create horizontal layouts.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <form class="row row-cols-lg-auto g-3 align-items-center">
      <div class="col-12">
         <label class="visually-hidden" for="usernameI">Username</label>
         <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="usernameI" placeholder="Username">
         </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="prefSelect">Preference</label>
        <select class="form-select" id="prefSelect">
           <option selected>Choose...</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
        </select>
      </div>
      <div class="col-12">
         <div class="form-check">
            <input class="form-check-input" type="checkbox" id="inlineCheck">
            <label class="form-check-label" for="inlineCheck">Remember me</label>
         </div>
      </div>
      <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
   </form>

</body><html>