On my website, I have created Bootstrap cards that are displayed on two different pages. One set of cards is shown on the landing page, where I am looking to increase the spacing between them. The other set appears on the books page, and I want to make the cards wider. Below is the code snippet that I have applied to both pages. The only modification I made was changing '...col-lg-3' to '...col-lg-2' on line 6. I tried using 'd-flex justify-content-evenly' but it didn't work with col-lg-3.
<section id="about" class="ts-block">
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
@foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
</section>