0

For one of my websites, I was using a bootstrap grid (container > row > col-3, etc.). It looked something like below.

<div class="container">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

It ended up looking like the image below.

enter image description here

However, I don't want it to look like that. I want it to look like the below image. enter image description here

My Question: Is there any way to accomplish this? (Preferably using the same bootstrap grid feature, but if it isn't possible that way, I'm open to other suggestions)

Note: I don't want the grid to be set previously. The height will be adaptive (If the text is longer, the height would be longer. If the text is shorter, the height is shorter).

Aniket G
  • 3,471
  • 1
  • 13
  • 39
  • This is not a duplicate of that. I am trying to use a bootstrap grid (`container > row > col`). Not css-grid – Aniket G May 13 '19 at 01:04
  • I also want it to be adaptive. Not set previously. – Aniket G May 13 '19 at 01:16
  • 1
    you said `but if it isn't possible that way, I'm open to other suggestions` --> it's impossible with bootstrap and the duplicate shows you *other suggestions* – Temani Afif May 13 '19 at 01:32
  • `I also want it to be adaptive. Not set previously` --> you cannot as explained in the duplicate (*In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be.*) – Temani Afif May 13 '19 at 01:33

0 Answers0