How to remove this horizontal scrollbar in Bootstrap 3
I’ve got this irritating horizontal scroll on my bootstrap page. Can’t figure out what is making it behave like this or what to do about it?
JsFiddle link: http://jsfiddle.net/FatAlbert/cd1syrd9/2/
As per Bootstrap 3 documentation:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Therefore, add the class
container to your
As for an explanation, the
.row class has
-15px margins on each side.
.container class effectively displaces that with the following:
In addition to reading the Bootstrap 3 docs, I’d suggest reading the article “ The Subtle Magic Behind Why the Bootstrap 3 Grid Works”.