Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #25057
Closed
Open
Issue created Dec 22, 2017 by Administrator@rootContributor

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:

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.

Assignee
Assign to
Time tracking