When working on my application, I find myself using the bootcard .card class quite frequently.
However, I've noticed that when switching to mobile view, there is a significant overflow issue that causes a display bug and shifts my entire page out of place.
This means that every time I want things to look right in mobile view, I have to make adjustments to the code within my .card class. It's quite frustrating.
On large screens:
https://i.sstatic.net/uLqPV.png
On small screens:
https://i.sstatic.net/VEkFD.png
Here is the code snippet causing the issues :
<div class="card mt-4">
<h5 class="card-header">
Subscription
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Do not cancel subscription</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th>PRODUCT</th>
<th>NEXT INVOICE</th>
<th>CREATED ON</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Cancellation scheduled for 05/03/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
No upcoming invoice
</td>
<td>
04/03/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
Your assistance with this matter would be greatly appreciated!