My current prototype Website has this layout, utilizing justify-content-around: https://i.sstatic.net/WUJdl.jpg
I am seeking a solution for when there is an odd number of cards, ensuring that the final card aligns with the rest. Is there a way to achieve this using justify-space-around instead of space-between?
Below is the snippet of my source code:
<div class="container-fluid">
<div class="container-fluid row justify-content-around cards ml-0">
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
In an additional CSS file, I included the following:
.cards::after{
content: '';
flex: auto;
}
This ensures that the last item remains on the left side rather than in the center!
Thank you for your help!