Skip to content

Inconsistent component default/spacer padding #25057

@bbugh

Description

@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:

image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions