Bootstrap 3.3.7 "row" causing horizontal scroll bar

Question

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 with container-fluid. Another said to wrap it in container. 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

https://jsfiddle.net/oLx4g8e3/1/

Answer 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>

Fiddle

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>

Fiddle

Answer 2

If someone is facing this in Bootstrap v4. Just add m-0 to your div.

<div class="row m-0"></div>

Answer 3

An easier way is to simply remove the margins on the offending row(s):

.row {
    margin-left: 0px;
    margin-right: 0px;
}

Answer 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>

Answer 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

Answer 6

Why dont you use a container-fluid and completely remove the margin ?

<div class="container-fluid" style="margin: 0">
   <div class="row">
      <div class="col-md-6">

      </div>
      <div class="col-md-6">

      </div>
   </div>
</div>

Or make your own div around it with width: 100%

Answer 7

In my particular case, I had to change .container from "width: 100%" to "width: initial".

  .container {
    width: initial;
  }

If you need to keep width: 100%, you could perhaps also try box-sizing: border-box;

  .container {
    box-sizing: border-box;
  }