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

css twitter-bootstrap bootstrap-5
Francesco Borzi picture Francesco Borzi · May 23, 2021 · Viewed 10.9k times · Source

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

Francesco Borzi picture Francesco Borzi · May 23, 2021

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;
}

label {
  margin-bottom: 0.5rem;
}

Related questions

Bootstrap: add margin/padding space between columns

I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code: <div class="row"> <div class="text-center col-md-6"> …

Read More
Bootstrap responsive sidebar menu to top navbar

So I've been searching and searching for guidance in this with no avail. Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar. My HTML code for …

Read More
Bootstrap Multiple Items Carousel (several carousel items shown at once)

How do you implement a multiple items carousel in Bootstrap 4? The docs mention about multiple carousels but not a carousel with multiple items.

Read More