Bug reportNov 5, 2026· 0:21· 12 views
Bootstrap v5: .w-100 column break inside .row.g-4 adds its own gutter-y — double the expected row gap
0:21 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
lowGrid gutter CSS (scss/mixins/_grid.scss, make-row / .row > * selector). The rule applies margin-top: var(--bs-gutter-y) to every direct child, and this includes the zero-height .w-100 break element.
os: macOSdpr: 1locale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720bootstrap: 5.3.3issue_ref: twbs/bootstrap#40702
Repro steps
- 1.Open a page that loads Bootstrap 5.3.3.
- 2.Create a .row.g-4 with Col 1 to Col 3, then a .w-100 break element, then Col 4 to Col 6.
- 3.Create a control .row.g-4 with Col 1 to Col 6 and no .w-100 break, so it wraps naturally.
- 4.Measure the vertical gap between Col 1 to Col 3 and Col 4 to Col 6 in both grids.
Expected
The vertical gap between rows in the .row.g-4 grid with a .w-100 break should be 24px. This is the same as the gutter-y gap in the control grid that wraps naturally.
Actual
The .w-100 break element gets its own 24px margin-top from the row gutter. Col 4 also gets its 24px margin-top. The two add up to a 48px gap (row1Bottom 192, row2Top 240), which is twice the expected 24px.
Evidence
visualThe bug grid 'BUG — .row.g-4 + .w-100 break' shows a visibly larger gap between the Col 1 to Col 3 row and the Col 4 to Col 6 row than the control grid shows.
visualControl: the grid 'OK — .row.g-4 natural wrap' shows the correct, tighter 24px gap between its two rows. This case works as expected.
consoleConsole warn: Bootstrap gap data: {"gapPx":48,"breakMargin":24,"col4Margin":24,"row1Bottom":192,"row2Top":240}
visualAn annotation between the bug rows reads 'Gap = 48px · .w-100 margin-top 24px + .col margin-top 24px · expected: 24px'.
visualThe doubled gap is still present in the bug grid after scrolling. The control grid still shows the correct gap.
Issue markdown (copy-paste ready)
## Summary
In Bootstrap 5.3.3, a `.w-100` column break placed inside a `.row.g-4` receives `margin-top: var(--bs-gutter-y)` from the `.row > *` rule. The break element's 24px margin adds to the 24px margin-top on the next row's columns. The visible row gap becomes 48px instead of 24px. Ref: twbs/bootstrap#40702.
## Environment
- Bootstrap 5.3.3
- Chromium 151.0.7922.34, macOS
- Viewport 1280x720, DPR 1
## Steps to reproduce
1. Load Bootstrap 5.3.3.
2. Build `.row.g-4` with Col 1 to Col 3, then `<div class="w-100"></div>`, then Col 4 to Col 6.
3. Build a control `.row.g-4` with Col 1 to Col 6 and no `.w-100`.
4. Measure the gap between the two rows in each grid.
## Expected
The gap between rows is 24px, the same as the gutter-y of the control grid.
## Actual
The gap is 48px. The `.w-100` break gets a 24px margin-top and Col 4 gets a 24px margin-top.
## Evidence
- **1.0s (visual):** The bug grid shows a larger row gap than the control grid.
- **1.0s (visual, control):** The `OK — .row.g-4 natural wrap` grid shows the correct 24px gap. This case works.
- **2.1s (console warn):** `Bootstrap gap data: {"gapPx":48,"breakMargin":24,"col4Margin":24,"row1Bottom":192,"row2Top":240}`
- **3.0s (visual):** The annotation reads `Gap = 48px · .w-100 margin-top 24px + .col margin-top 24px · expected: 24px`.
- **19.0s (visual):** The doubled gap is still present after scrolling.
## Suggested area
The grid gutter rule in `scss/mixins/_grid.scss` (`.row > *` gets `margin-top: var(--bs-gutter-y)`). A possible fix is to exclude zero-height break elements from the rule. Another option is to document a `mt-0` requirement for `.w-100` breaks in gutter rows.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →