Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Row gutter classes also affect container gutters

See original GitHub issue

Operation system: all Browser: all Reduced test case: https://codepen.io/martinbean/pen/gOweLmQ?editors=1000

If you have a container within a row, and that row has gutters removed (.row.g-0), the gutters are also removed from containers anywhere within that row (as it uses the --bs-gutter-x CSS variable, and the .g-0 class sets the value of that variable to zero).

I would expect containers to still retain its padding. Is this intended or not?

Example:

<div class="row g-0">
  <div class="col-12">
    <div class="container">
      <p>Container (now with no gutters)</p>
    </div>
  </div>
</div>

Issue Analytics

State:
Created 3 years ago
Comments:8 (7 by maintainers)

Top GitHub Comments

3reactions

alpadevcommented, Aug 2, 2021

Shouldn’t be the $gutters variable based on the $grid-gutter-width rather than $spacers? (https://github.com/twbs/bootstrap/blob/23fd488c380c347a3d0121a49b6285bdd65418a2/scss/_variables.scss#L470)

Based on @martinbean’s comment we have gutters set to 1.5rem by default so there is a mismatch in general with this .g-* approach.

2reactions

martinbeancommented, Jan 14, 2021

@ffoodd Well, the container acts differently whether it’s inside a row or not. Some times it has gutters, some times it doesn’t.

My example is, I’m using a gutter-less row for an admin panel layout:

<body>
  <div class="row g-0">
    <div class="col col-sidebar">
      <!-- Header -->
      <!-- Navigation -->
    </div>
    <div class="col">
      <div class="container">
        <!-- Content -->
      </div>
    </div>
  </div>
</body>

I have a fixed-width, left-hand column that holds a logo and navigation menu, and then a flexible right-hand column that holds the content. But because this row is the full width of the screen, I don’t want the content to just keep on expanding as well—I want it contained. So I wrapped it in a container.

The problem is on “medium”-sized screens (i.e. tablets) where the container has a max-width greater than the width of the right-hand column. The container is now butted up against the left-hand column and the right-hand side of the screen, instead of having spacing either side like I would expect, and like it would have in the previous four major versions of Bootstrap.