Solve a mysterious excess width causing horizontal scroll in Bootstrap's container class with this trick

It is caused by display: inline. Add a d-block beside the container class to resolve it.

By Ace Z. Alba

Published on August 26, 2024, 4:04 pm

Category: solutions

Tag: css, bootstrap

It is a weird edge case I found when rewriting a lot of Bootstrap's official snippets, because they tend to do a lot of weird layout shifts on its own breakpoints. On occasion, you will find one .container class that keeps on activating horizontal scroll no matter no much you strip out and add over a lot of code. With much debugging, I found that display: inline is causing this weird edge case. If your container class is one that intends to occupy its own block, like banners and jumbotrons, simply add .d-block beside the .container class.