I've been experimenting with the bootstrap grid system and I'm starting to get the hang of it, but I'm facing an issue where changing the width of elements inside a column causes overlap when resizing the browser window.
I'm trying to make my cards responsive when resizing the browser, while also being able to adjust the card sizes without them overlapping.
Here's how it looks when I change the width
And here's how it should look like
This is what my code currently looks like:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-down"></i></a>
</div>
<h4 class="text-white mb-2">1</h4>
<p class="text-white">Test Card</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-up"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 2</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-ticket"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 3</p>
</div>
</div>
</div>
</div>
</div>
</main>
I seem to be stuck on this issue. Any help would be greatly appreciated.