Inconsistent component default/spacer padding
Created by: bbugh
We've been running into consistency issues using Bootstrap 4beta2's default spacing.
Most of the components ($table-cell-padding
, $card-spacer-y
, $alert-padding-y
, etc.) use a padding: .75rem
. However, the $spacers
don't include that value. It's not possible to use a built in padding class to match the components, which is very weird.
For example, putting a table
into a card
:
<div class="card">
<h4 class="card-header">My Header</h4>
<table class="table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</table>
</div>
Results in HTML that looks like this:
The .card-header
class is using a hard-coded 1.25rem
padding (from $card-spacer-x
), while the table cell is using hard-coded .75rem
(from $table-cell-padding
).
I would expect to be able to have some kind of pl-?
(left) or pt-?
(top) class that matches these components default, since it's in so many places. However, there aren't any Bootstrap-defined classes that you can use to get that .card-header
padding to match all of the default component paddings. I realize we can make our own class, but it seems like an oversight and an actual issue to note.