Bootstrap 3.3.7 "row" causing horizontal scroll bar

16,005

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>

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

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

Share:
16,005
Casey Crookston
Author by

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, 2022

Comments

  • Casey Crookston
    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 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/