Bootstrap 5 form-group, form-row, form-inline

Question

I'm trying to update my app from Bootstrap 4 to Bootstrap 5, but all the elements that were using form classes such as form-group, form-row, form-inline are completely broken.

Answer 1

The reason is form-group, form-row, and form-inline classes have been removed in Bootstrap 5:

Breaking change: Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.

https://getbootstrap.com/docs/5.0/migration/#forms

So Grid and Utilities are supposed to be used instead.

...but if you are looking for a quick solution, here's how these classes were working in Bootstrap 4:

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col {
  padding-left: 5px;
  padding-right: 5px;
}

label {
  margin-bottom: 0.5rem;
}

Answer 2

How to migrate an .inline-form to Bootstrap 5+

TLDR:

1. Replace the Bootstrap 4 inline-form class with flexbox helper classes: d-flex flex-row align-items-center flex-wrap.
2. If you used the mr-* class to space your form elements, replace these with the equivalent me-* classes ("margin end"). E.x. mr-2 becomes me-2. Similarly, ml-* becomes ms-* ("margin start").
3. Consult the Bootstrap 5 form documentation to migrate your input elements. For example, on a select element the class custom-select in v4 becomes form-select in v5.

Full Example

Compare the Bootstrap 4 inline form below with the exact equivalent form in Bootstrap 5.

Example (trimmed) from Bootstrap 4's docs (Codesandbox).

This is Bootstrap 4 code.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Same form in Bootstrap 5 (Codesandbox)

<form class="d-flex flex-row align-items-center flex-wrap">
  <label class="my-1 me-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="form-select my-1 me-sm-2 w-auto" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
  </select>

  <div class="form-check my-1 me-sm-2">
    <input type="checkbox" class="form-check-input" id="customControlInline" />
    <label class="form-check-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

What to do with the deprecated form-group, form-row and form-inline classes in Bootstrap 5

As others have mentioned, the classes form-group, form-row and form-inline are removed in Bootstrap 5. Here's how they can be replaced:

• form-group can be replaced with mb-3, since it previously applied the property margin-bottom: 1rem which the mb-3 class will do by default as well.
• Form specific layout classes are dropped (source: Migration guide). form-row can be replaced with row in most instances.
• As described above, form-inline can be recreated by applying the following classes: d-flex flex-row align-items-center flex-wrap.

Hope this helps!