How do I remove the space between one line and another of cards in Bootstrap4?

Question

Good night.

I’m using Bootstrap4 in my Django project, but as in the following print, there’s a gap between cards (marked with an x) because of their different size. I would like the images below to fit naturally (as occurs on Pinterest, for example).

I’ve been taking a look at the basic Bootstrap documentation but I couldn’t find a suitable solution to eliminate this space. To create this page I am guided by the example Album. Follow the code I have now, and that generates that printscreen:

{% for l in lores %}
                    <div class="col-md-3">
                    <div class="card mb-4 shadow-sm">
                          <div>
                            <a href="{% url 'lore_detail' pk=l.pk %}"><img class="card-img-top" src="{{l.image.url}}"></a>
                                    <div class="card-body">
                                        <p class="card-text">{{ l.title }}</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                  {% endfor %}

This is my Django’s, and it’s working correctly (sorry for the identation, in the copy to here it got weird.)

Answer 1

I ended up discovering it myself, I’ll leave it on record. I hope it’s useful.

The answer is in the documentation, in the section that talks about the Cards. It works in a similar way to the masonry they recommended in the comments. However, it is a solution using the bootstrap itself.

Just put my for between a div card Columns:

<div class="card-columns">
    {% for l in lores %}
        ...
    {% endfor %}
</div>