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/

taking another row inside col will fixit https://jsfiddle.net/oLx4g8e3/3/ — Ismail Farooq, Jun 22 '17 at 05:50

Ismail Farooq · Accepted Answer · 2017-06-22T06:17:34.157

25

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

edited Jun 22 '17 at 06:17

answered Jun 22 '17 at 05:57

Ismail Farooq

6,309
1
27
47

Really smart solution! I never thought about inverting the order, and putting `.row` inside of `.col-*`... it works perfectly to stop page width elements from causing horizontal overflow. – TetraDev Nov 20 '19 at 18:59
2

Seems like more of a hack than a solution. – crush Dec 08 '20 at 18:08
4

Strange! I think they expect `rows` to be inside at least one bootstrap container. Having row as the absolute parent is causing this issue. – Deb May 02 '21 at 14:16
Both solutions very smart, in their own ways. Thanks for that – Steven X Mar 31 '22 at 15:07
That breaks the row => column heirarchy and practaically ignores bootstrap and might look like a bug to a future developer. A better solution is adding a semantic class that cancels the margin explicitly (like container-fluid does, e.g. row-no-container, or row-nomargins). – Cesar May 11 '23 at 15:01

score 18 · Answer 2 · answered Jan 05 '20 at 18:07

18

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

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

answered Jan 05 '20 at 18:07

Arsen Ablaev

431
7
13

score 4 · Answer 3 · answered Aug 27 '18 at 20:21

4

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

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

answered Aug 27 '18 at 20:21

aalaap

4,145
5
52
59

Robert Dewitt · Answer 4 · 2017-06-22T21:38:44.280

2

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>

edited Jun 22 '17 at 21:38

answered Jun 21 '17 at 22:52

Robert Dewitt

324
5
17

Yes, I am talking about a scroll bar appearing on the bottom of the page. (Title updated for clarity). See the fiddle, where there is nothing but the HTML in my OP. Thanks! – Casey Crookston Jun 21 '17 at 22:55
Also, your fiddle has margins on the side, which (as I said in the OP) I can't have. – Casey Crookston Jun 21 '17 at 22:56
1

Let me clear something up- Why can't the page have margins? – Robert Dewitt Jun 21 '17 at 23:00
A fair question. Answer: because the customer said "No margins" :-) There is graphical content that needs to bleed all the way to the edge of the screen. – Casey Crookston Jun 21 '17 at 23:02
There's a lot going on there, which is why I created the fiddle https://jsfiddle.net/oLx4g8e3/1/ which demonstrates the same problem. – Casey Crookston Jun 21 '17 at 23:04
(In other words, it's not worth looking at the actual page where I'm having the trouble. I just want to get a no-margin page with no horizontal scroll working in Fiddle, and then I can go from there.) – Casey Crookston Jun 21 '17 at 23:05
Ah, I see! Flexbox might actually suit your needs here. Let me link [**this post**](https://stackoverflow.com/questions/33001013/how-to-remove-left-and-right-margins-from-all-wrapped-rows-in-flexbox-without-n) regarding flexbox having no margins. Pretty sure this will mix with Bootstrap just fine. – Robert Dewitt Jun 21 '17 at 23:10
ok, thanks. Dinner time. I will digest your link later tonight. – Casey Crookston Jun 21 '17 at 23:17

Dexter · Answer 5 · 2022-12-05T03:48:04.423

I will just straight away jump to Bootstrap 5 since this is the latest version and everyone is using it currently.

Last Updated on Dec 2022

Tested on Bootstrap 5.2 ✔
Tested on Bootstrap 5.1 ✔
Tested on Bootstrap 5.0 ✔

Bootstrap 5

If some of you using Bootstrap 5 you can use overflow-hidden to fix this issue. Thought it might help others.

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.

After going through the documentation I came across overflow-hidden.

https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters

<div class="container-fluid px-0 overflow-hidden">
    <div class="row">
        <div class="col-12">
            <!-- your text -->
        </div>
    </div>
</div>

score 0 · Answer 6 · answered Jun 22 '17 at 06:26

0

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%

answered Jun 22 '17 at 06:26

Pascal Hannemann

35
6

I tried this in fiddle. It still has margins on the side. – Casey Crookston Jun 22 '17 at 12:58
I will try some things later in fiddle im on mobile, I had the same Problem and tried it with Lots of things and most of them worked;) – Pascal Hannemann Jun 22 '17 at 15:48

score 0 · Answer 7 · answered Apr 22 '22 at 01:57

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;
  }

score 0 · Answer 8 · edited Apr 05 '23 at 02:26

0

In my case, I notice a overflow on my nav.

With angular binding:

<div class="row" [style]="{'width': '100%'}">
    <div class="col-12">
        (Your content here)
    </div>
</div>

Or inline:

<div class="row" style="width:100%">
    <div class="col-12">
        (Your content here)
    </div>
</div>

This solved my problem.

edited Apr 05 '23 at 02:26

user16217248

3,119
19
19
37

answered Mar 30 '23 at 15:11

Vinicius Bernardo

41
4

Bootstrap 3.3.7 "row" causing horizontal scroll bar

8 Answers8

Last Updated on Dec 2022

Bootstrap 5

Linked

Related