I'm having trouble with showing stacked images. I'm using Bootstrap and I'm displaying all pictures in a model with Django (no issues with Django here).
Here is what the page looks like
I know this is down to flexbox, and I've searched and used various things like wrap, align-items, justify content etc and while I can get the landscape images to align with the bottom of the portrait ones in one line, what I want to make them do is all stack together like the way the images are stacked on this website: https://unsplash.com/
Various orientations all stacking horizontally together nicely. Here is my code (the {code} is just pulling data from Django models, it adds each picture in a loop)
<div class="row my-4 text-center mx-auto w-auto flex-wrap align-items-start">
{% for picture in object_list %}
<div class="col mx-auto centered mb-3">
<a href="#">
<div class="card mx-auto text-center" style="width: 25em">
<img src="{{ picture.front_image.url }}" class="card-img-top p-3" alt="Picture">
<div class="card-body">
<h5 class="card-title font-weight-bold">{{ picture.name }}</h5>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
I have asked the question after looking at other questions and guides and have tried various things, mostly changing the top div to include various Bootstrap classes, but I haven't been able to get the effect I want.
Any help or advice appreciated
