Describe the bug
Bootstrap 5 supports equal height columns by applying the h-100 class to the element inside a col.
You can find an example with cards on Bootstrap documentation.
Unfortunately, this cannot be used on EasyAdmin because of incorrect usage of colunm spacing.
EasyAdmin applies spacing by manually setting margin-block-end to elements.
But the proper way to manage spacing with Bootstrap 5 is to use gutter classes on row element:
https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal--vertical-gutters
Or using gap classes (with on d-flex elements):
https://getbootstrap.com/docs/5.3/utilities/spacing/#gap
To Reproduce
Apply the h-100 to fieldsets:
return [
FormField::addColumn(6),
FormField::addFieldset('Fieldset 1')->setCssClass('h-100'),
// ...
FormField::addColumn(6),
FormField::addFieldset('Fieldset 2')->setCssClass('h-100'),
// ...
FormField::addColumn(12),
FormField::addFieldset('Fieldset 3'),
// ...
]
As you can see, the vertical spacing is missing:
.
If I manually add g-4 to the parent <div class="row g-4">, the result is now correct:

Describe the bug
Bootstrap 5 supports equal height columns by applying the
h-100class to the element inside a col.You can find an example with cards on Bootstrap documentation.
Unfortunately, this cannot be used on EasyAdmin because of incorrect usage of colunm spacing.
EasyAdmin applies spacing by manually setting
margin-block-endto elements.But the proper way to manage spacing with Bootstrap 5 is to use gutter classes on row element:
https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal--vertical-gutters
Or using gap classes (with on d-flex elements):
https://getbootstrap.com/docs/5.3/utilities/spacing/#gap
To Reproduce
Apply the
h-100to fieldsets:As you can see, the vertical spacing is missing:
.
If I manually add
g-4to the parent<div class="row g-4">, the result is now correct: