Currently using "Bootstrap-4" and facing an issue with alignment in a table. The table structure is as follows:
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
<th class="col">Buttons</th>
<th class="col-1">Item 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Very length column</td>
<th class="col">
<div class="row no-gutters">
<div class="col-2">
<button class="btn btn-secondary btn-block">
-
</button>
</div>
<div class="col text-center quantity">
7 in cart
</div>
<div class="col-2">
<button class="btn btn-secondary btn-block">
+
</button>
</div>
</div>
</th>
<th class="col-1">Item 04</th>
</tr>
</tbody>
</table>
</div>
The symbols like - and + within buttons are not aligned properly on smaller devices, unlike on larger screens:
https://i.sstatic.net/esl75.png
Seeking a solution to align the signs - and + at smaller device widths(e.g.,275px):
https://i.sstatic.net/iLHYC.png
Is there a way to address this alignment issue for the buttons' content on smaller devices?
Here is an example link for reference.