Skip to content

Container x-padding (1rem + 1rem) larger than row negative margins (-1.5rem) #31642

@jeffhuang

Description

@jeffhuang

I'm a little confused why the padding on containers,

  padding-right: 1rem;
  padding-left: 1rem;

is 2rem in total, but the row negative margins are -1.5rem in total

.row {
  --bs-gutter-x: 1.5rem;
  /* snip */
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

This results in 0.25rem of padding on the left and right of the containers, and makes edge-to-edge a challenge. While it doesn't matter much in the examples because they use a white background, it makes edge-to-edge backgrounds a problem. Is this intentional or a bug? Because my interpretation of the documentation is that the negative margins on the rows should exactly counteract the padding on containers. When I set --bs-gutter-x to 2rem, the problem goes away.

Thanks for all the work on Bootstrap v5! I am very excited about the stable release.

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