0

I'm seeing an issue I've never encountered before. I've searched for the answer, but having a hard time finding the right search terms to find a solution.

I have a row with 3 divs. Using Bootstrap, all three have class="col-md-6"..ie the divs take up 50% width of the row. The content inside them is dynamic, so each div may or may not be in any given view. What I'm trying to achieve is to have them wrap in such a way that if all three have content, two will be on the top "row" and the third below. I have that part working.

The content inside each Div is dynamic, meaning sometimes any given Div may be longer than the other.

So here is what happens:

  1. THIS IS WHAT I WANT TO HAPPEN IN SCENARIO 01 - If Col #1 is longer than Col #2, Col #3 fills in directly below Col #2. This is what I want to happen:

Example 01

  1. THIS IS NOT WHAT I WANT TO HAPPEN SCENARIO 02 - If Col #1 is shorter than Col #2. Col #3 fills in under Col #1, but it starts where Col #2 ends, leaving a gap.

Example 02

  1. THIS IS WHAT I WANT TO HAPPEN SCENARIO 02 - I'd like Col #3 to fill directly below Col #1

Example 03

Any ideas?

Thanks in advance.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Scott
  • 17
  • 4

1 Answers1

0

Hi and thanks for your question here on Stackoverflow, what you are trying to do is available for Bootstrap. But it can't be achieved by just using the col-md-6 classes.

So Bootstrap has a component for that, something similar is described at the Bootstrap Documentary. It can be found here: https://getbootstrap.com/docs/4.5/components/card/#card-columns

Its called Masonry. This is also achievable via Flexbox and Javascript plugins.

Flexbox: https://w3bits.com/flexbox-masonry/

Javascript Masonry: https://masonry.desandro.com/

Hopefully this does your job.

dutchsociety
  • 575
  • 4
  • 22
  • Thanks @dutchsociety. I ran across the term in my previous research, but it didn't seem to be doing the trick. These resources explain it much better and hopefully will do the trick. Thank you for taking the time to answer. Very kind of you. – Scott Aug 28 '20 at 20:41
  • Glad I could help, wish you luck! If you have any questions just let us know. – dutchsociety Aug 28 '20 at 20:42