When it comes to Bootstrap 4 cards with images, most have the image positioned at the top using .card-img-top. But what if you want the image to be at the left or at the top depending on the width?
Currently, I have two types of cards - one with the image at the top and the other with the image on the left using additional columns to create a horizontal layout.
https://i.sstatic.net/6mafd.png
Is it possible to have a single card that dynamically positions the image based on the column width?
For example, at smaller screen sizes (xs, sm), the columns are stacked vertically and the image should be on top. But at larger screen sizes (md, lg), the column widths vary and the image should be on the left.
Is there a way to achieve this using a single card code, or would it require more complex logic?
Here is the code for vertical cards:
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
<div class="card rounded-0 w-100 bg-white shadow-sm">
<a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
<img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="card-img-top img-fluid rounded-0">
</a>
<div class="card-body pb-2">
<h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
</div>
<div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
<img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
<span class="ml-1"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>
</div>
</div>
</div>
And here is the code for horizontal cards:
<div class="row">
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
<div class="card rounded-0 bg-white shadow-sm">
<div class="row">
<div class="col-md-4">
<a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
<img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="img-fluid rounded-0" style="object-fit:cover">
</a>
</div>
<div class="col-md-8 pl-0 py-2">
<div class="card-block">
<h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
<img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
<span class="small pl-0 ml-0"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
(I am working on making the images fill the available space with a "cover" style. The images on vertical cards should maintain a landscape orientation while on horizontal cards they should be square. Note: there is currently a spacing issue with my horizontal-card code when the right text is longer than the left image.)