Good evening.
I'm using Bootstrap4 in my Django project, but as in the following print, there's a space between the cards (marked with an x) because of its different size. I would like the images below to fit naturally (as in Pinterest, for example).
I'vebeentakingalookatthebasicBootstrapdocumentationbutIcouldnotfindasuitablesolutiontoeliminatethatspace.TocreatethispageI'mleadingmyselfbyexample Album . Here is the code I have now, which generates those 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 from my Django, and it's working properly (sorry for the indentation, the copy here was weird.)