using container-fluid within bootstrap cause horizontal scrollbar

Question

Here is a simple example:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Demo in Fiddle

When I see the result in browser I get a horizontal scrollbar.

Why is this happening?

What am I doing wrong?

score 58 · Accepted Answer · edited Apr 10 '17 at 16:12

58

container-fluid was originally taken out of Bootstrap 3.0, but added back in 3.1.1

To fix this, you can either:

Use the newer version of Bootstrap style sheet

Demo with New Style Sheet in Fiddle
Or add in the class yourself

The .row adds a 15px margin to the left and right. Since .container-fluid fills up 100% of the screen width, the extra margin space causes overflow issues.

To fix this, you need to add padding to .container-fluid class
```
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
```
Demo with Custom container class in Fiddle

edited Apr 10 '17 at 16:12

rogerdpack

62,887
36
269
388

answered May 20 '14 at 19:26

KyleMit

30,350
66
462
664

Updating bootstrap (from 3.0.0 to 3.3.7) was the easiest approach for me. Worked like a charm! – Reuel Ribeiro May 26 '17 at 01:53
1

The `auto` margins are not necessary. – tao Dec 01 '19 at 21:08

score 46 · Answer 2 · answered May 20 '14 at 19:26

46

I also faced this problem. I don't know the cause of the problem. It maybe a bug from Twitter Bootstrap. Now, I have to manually add the overflow-x:hidden to my body tag:

body { 
   overflow-x: hidden;
}

Jsfiddle

answered May 20 '14 at 19:26

lvarayut

13,963
17
63
87

Lvarayut, interesting workaround. The real problem is that Bootstrap v3.0 doesn't include `.container-fluid` at all! Open up your console and see how many matched rules appear or Ctrl + F through the stylesheet. The easiest fix is to just grab the newest style sheet for version 3.1 – KyleMit May 20 '14 at 19:57
1

This solution is very nice, thanks! Strangely enough adding 5px margin left and right on the body did the same for me while still let the website comopnents 'touch' the edges of the canvas completely (using 24 columns with 15px gutter) – Klaaz Nov 21 '14 at 00:17
2

You should note that this workaround only hides the scrollbar and your layout can still be "moved left and right". This becomes a problem if your target devices is a tablet or mobile and so your page visitors move your site to the left while scrolling down. Imho a bad user experience ;) – philsch Jun 11 '15 at 16:20
Many thanks for this! For mobile I also had to add overflow-x: hidden; to html {} as well. – alana314 Aug 08 '16 at 23:19

score 14 · Answer 3 · answered Feb 13 '15 at 12:06

14

In my case this fix worked well:

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

answered Feb 13 '15 at 12:06

Viktor L

183
1
8

score 8 · Answer 4 · answered Jun 24 '15 at 20:32

8

.row{
margin: 0px;
}

quick easy fix this is all you need

answered Jun 24 '15 at 20:32

Christopher Clear

91
1
3

You made my day! <3 – blackcub3s Mar 08 '21 at 18:19

score 4 · Answer 5 · edited May 29 '15 at 08:39

4

Make sure to encapsulate your row classes with containers.

<div class="container">
    <div class="row">
        text
    </div>
</div>

The container offsets the -15 margins on rows with +15.

edited May 29 '15 at 08:39

Rory McCrossan

331,213
40
305
339

answered May 29 '15 at 08:23

David Stack

129
5

3

This answer causes the page not to be full width.. thats the idea if you're using fluid isn't it? – Randy Apr 06 '16 at 13:21
2

I found adding my rows within a container-fluid did the trick – haakym Sep 20 '18 at 09:02

score 3 · Answer 6 · answered Sep 22 '16 at 18:56

3

You can dirty hack the row by add new class to the full width row and create overwrite css file:

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }

<div class="row noLRMar">
  
 </div>

answered Sep 22 '16 at 18:56

Omar Noor

31
2

1

[Bootstrap 4](https://getbootstrap.com/docs/4.4/utilities/spacing/#notation) has the built-in `mx-0` class that does exactly that. – Ricardo Apr 04 '20 at 01:43

score 2 · Answer 7 · answered Feb 26 '22 at 13:22

2

Bootstrap 5 solution:

You can add to the .container-fluid element a second class .overflow-hidden.

answered Feb 26 '22 at 13:22

X9DESIGN

33
7

This was the right answer for me :) – Axel Kennedal Nov 29 '22 at 09:12

score 0 · Answer 8 · answered Dec 22 '15 at 17:37

In my case, changing @grid-gutter-width to odd number caused this, because;

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

So if you pick an odd gutter-width then you will end up having uneven paddings and you will see a horizontal scrollbar.

score -1 · Answer 9 · answered Dec 01 '19 at 20:45

-1

I got the same problem, using .container-fluid on its own creates horizontal scrolling, but I fixed it with a nested .container, hope that helps!

<div class="container-fluid">
    <div class="container">
    </div>
</div>

answered Dec 01 '19 at 20:45

Jose Enciso

1
1

2

You are repeating an answer which was already given several times, and which is **wrong**. The whole point of using `.container-fluid` is to have the `.row` expand the entire width of the viewport. Wrapping `.row` in a `.container` defeats the purpose of using `.container-fluid`. Also, the problem can be fixed by setting left and right padding of `15px` on `.container-fluid` (to counter `.row`'s negative margins) or by upgrading Bootstrap from `v3.0` to `v3.3.7` (which contains the padding fix). As a side node, the auto margins are not required in this case. – tao Dec 01 '19 at 21:02

score -2 · Answer 10 · edited Oct 30 '15 at 14:04

-2

With Bootstrap 3.3.5, I was getting a horizontal scroll bar at certain widths near the change from the medium (md) to small (sm) screen size. Adding a div.row between my div.container-fluid and div.container fixed it for me.

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

Adding margin:0; to your rows will break some styling elements.

edited Oct 30 '15 at 14:04

maxshuty

9,708
13
64
77

answered Oct 30 '15 at 13:34

user5507241

1

1

This is incorrect. According to bootstrap documentation, only columns should be direct children of row. And rows can't be children of another row. From Bootstrap's documentation: "Content should be placed within columns, and only columns may be immediate children of rows." – Henry Ollarves Apr 10 '17 at 10:11

score -2 · Answer 11 · edited Sep 01 '16 at 11:33

-2

Set max-width in the container class instead of width. It will remove the horizontal bar.

.container-fluid { 
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 
}

edited Sep 01 '16 at 11:33

Eiko

25,601
15
56
71

answered Sep 01 '16 at 11:09

Waleed Khan

1
4

2

this doens't make sense. you're using .container-fluid becouse you don't want to have a max-width. – lcjury Apr 02 '18 at 15:21

using container-fluid within bootstrap cause horizontal scrollbar

Demo in Fiddle

11 Answers11

Demo with New Style Sheet in Fiddle

Demo with Custom container class in Fiddle

Linked