My Bootstrap-card is currently not adjusting its width properly. I want the card to occupy the full width of the column it's in. Below is a snippet of my code and a screenshot showing the current width along with the desired width indicated by a blue background.
Is there an elegant solution that you know of to achieve this? Keep in mind the responsiveness aspect as well.
<div class="row">
<ng-container *ngFor="let event of events">
<div class="col-12 col-lg-6 d-flex mt-5">
<!-- Card -->
<div class="card shadow-light-lg lift lift-lg">
<a class="card-body my-auto">
<div class="d-flex justify-content-between align-content-center align-items-center py-3">
<!-- some content -->
<h3 class="mt-auto">
{{event.title}}
</h3>
<div class="mb-0 text-muted" id="card-description">
{{event.description}}
</div>
</div>
</a>
</div>
</div>
...
</ng-container>
</div>