3

I have a page with bootstrap cards with a width of 49%, so two cards can be placed next to each other. This works just fine, but some of the cards are longer than others, so there appears to be some free space between 'two rows of cards'.

Example picture of the problem:

Example picture of the problem

Example picture with behavior of the 'right column':

Example picture with behavior of the 'right column'

As you can see, the cards in the 'left column' are not sliding up, but the cards on the right do.

CSS I used:

.section {
   min-width: 49%;
   max-widht: 49%;
   float: left;
}

#card_container {
   overflow: hidden;
}

The HTML is just one div for the container and one div for each section (with bootstrap classes). The inline styles are just for example purposes:

<div id="card_container">
<div class="section" style="height: 500px"></div>
<div class="section" style="height: 200px"></div>
<div class="section" style="height: 900px"></div>
<div class="section" style="height: 300px"></div>
</div>

How can i achieve that the cards fill up the entire space, so there is no space left between the cards (except the default margins etc.)?

Community
  • 1
  • 1
TM.96
  • 155
  • 12
  • 1
    Additionally, in Bootstrap 4 it's possible [out of the box](https://getbootstrap.com/docs/4.3/components/card/#card-columns). – tao Feb 24 '19 at 23:11
  • You're right, i didn't think of the masonry layout. I just tried it for myself, can you close this questions please? Thanks very much! @AndreiGheorghiu – TM.96 Feb 24 '19 at 23:13
  • @T, I don't advise on closing/deleting the question. Marking as duplicate is not bad. On the contrary, it creates a network of related questions that helps indexing and, ultimately, helps future users find the answers they're looking for faster. It's a good thing. The very fact you asked it means the matter could use better indexing. – tao Feb 24 '19 at 23:16
  • @AndreiGheorghiu, alright, I neither thought of this. Thanks for the clarification! – TM.96 Feb 24 '19 at 23:19
  • And there's another thing: you're new to web development so you didn't know you were looking for masonry. So you asked in what you thought were the best terms to describe the problem. That's exactly what you should have done. There's a big probability that other users might have the same problem and use the same terms. Your question will help those users find out that what they're looking for is called "masonry" and get their problem sorted out. Happy coding and welcome to Stack! – tao Feb 24 '19 at 23:19

0 Answers0