0

I want to arange unequal high elements in a floating environment with bootstrap 4 and flexbox.

Without using flexbox in BS4 the elements are aranged in equal height ( <div class="row">). Applying flexbox like <div class="row d-flex flex-wrap align-items-start"> I get the desired alignment but if the elements have an unequal height they - of course - don't float.

Is there a way to achieve this to look

like the "former" BS3 bahaviour ?

I want to implement a general "algorithm" so that I can add elements without specifying the positions explicitly.

p_reim
  • 53
  • 1
  • 4

1 Answers1

0

No, there's no way to get flexbox items to float.

However, you can override the display:flexbox on the Bootstrap 4 row, by using d-block and use the float utils. This has already be explained in several other questions.

Bootstrap 4 - I don't want columns to have the same height
Rearranging responsive Bootstrap 4 grid layout
Bootstrap Responsive Columns Height
Empty vertical space between columns in Bootstrap 4

Note that d-block is a responsive class (d-sm-block, d-md-block, etc...) which allows you to override flexbox responsively on specific breakpoints.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624