Bootstrap 3.3.7 "row" causing horizontal scroll bar
Solution 1
First of all you don't need row
or col-*12
classes if your section is 100% wide look at this bootstrap example they have not taken any row
or col-*12
neither with header nor jumbotron. If your section has column Just take row inside col-*
classes for example
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
Or in case if you are using container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
</div>
</div>
Solution 2
If someone is facing this in Bootstrap v4.
Just add m-0
to your div.
<div class="row m-0"></div>
Solution 3
An easier way is to simply remove the margins on the offending row(s):
.row {
margin-left: 0px;
margin-right: 0px;
}
Solution 4
Are you talking about a scrollbar appearing on the bottom of the page when the container is supposed to be fluid? There might be an element in your page that is extending the width of the screen.
I usually use this Chrome extension to see what CSS elements are extending farther than they should.
Also, see if this Fiddle helps (code below).
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
Lorem Ipsum is simply dummied text of the printing and typesetting industry.
</div>
</div>
</div>
Solution 5
Bootstrap 5.0 [ Apr 2021 ]
Working and Tested ✔
If some of you using bootstrap 5 you can use overflow-hidden
to fix this issue. I just came across and landed on this page. I though it might be helpful for some.
My situation is I had to use row
inside container-fluid
and the row
is not touching the edge of my browser which is want i wanted. When i add px-0
i get the horizontal scroll bar.
To fix this issue you can use the build-in class overflow-hidden
to the container-fluid
<div class="container-fluid px-0 overflow-hidden">
<div class="row">
<div class="col">
<!-- your text -->
</div>
</div>
</div>
Source: https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters
Casey Crookston
Hey there! Thanks for taking a look at my profile. I've been in software development for 20+ years, much of it as a developer, and now as a project manager. I'm also the author of the book, "The Byte Guide, a Guide to Launching your Career in Software Development."
Updated on June 14, 2022Comments
-
Casey Crookston about 2 years
Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this:
<div class="row"> <div class="col-sm-12"> stuff </div> </div>
And there is still a horizontal scroll bar. In dev tools, I can find the
row
:.row { margin-right: -15px; margin-left: -15px; }
And if I un-click
margin-right: -15px;
then the problem goes away. But, on my actual page (with all of the content) this creates another problem. The page needs to have zero margins, but it now was a 15px margin on the right.One of the answers here sad to wrap
row
withcontainer-fluid
. Another said to wrap it incontainer
. Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.I've found threads discussing this as far back as 2013. Is this really not fixed yet?
What do I need to do?
Also: Fiddle