Twitter bootstrap white gap on right side of page

Question

I am having an issue with my responsive stylesheet with Twitter Bootstrap. The site shows up fine with no issues but for whatever reason the responsive tablet and phone have this huge white gap to the right of the page. Its not the scroll bar issue its a huge white gap

https://i.stack.imgur.com/AllrQ.png

I dont believe I have changed to much at all here. Nothing with width or anything. Inspected the objects in Chrome and couldnt see anything overflowing over width wise

score 76 · Accepted Answer · answered Apr 19 '16 at 16:35

This might be a little late but I found the other answers to be misleading.

It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.

from http://getbootstrap.com/css/ :

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.

`row`s on my page are within `container` or `container-fluid` but I still see the big white space on the right. Cant figure it out even with Chrome dev tools. This happens only on pages with forms. Any ideas? — Anupam, Mar 20 '18 at 09:23

score 52 · Answer 2 · answered Oct 23 '13 at 23:27

52

Have you tried:

html, body { overflow-x: hidden; }

Can you post a fiddle?

answered Oct 23 '13 at 23:27

Giulio

783
7
21

I figured it out. It had something to do with the padding – Lynx Oct 24 '13 at 17:35
This works unless you need a horizontal scrollbar on any other page on your site. At least, that was my experience. – JosephK Aug 01 '14 at 16:46
4

Watch out for bootstrap's 'row' class and the {margin-right:-15px}. That was causing this on my page. – JosephK Aug 01 '14 at 17:29
This solved my problem, but then bootstrap's scrollspy stopped working. :/ – Gabriel Kunkel Nov 23 '15 at 05:22
I'm sorry, I usually never use that plugin and I know that this solution is hack-ish. – Giulio Nov 25 '15 at 10:48
thanks @JosephK it was margin-right of row that fixed my problem – BeeBee8 Dec 31 '16 at 13:00
/* Hide horizontal scrollbar */ .body, .head, .row, .col { overflow-x: hidden; } – Taylor D Sep 17 '22 at 01:45

Scott Selby · Answer 3 · 2014-11-12T19:09:33.010

10

Add the following meta tag to your HTML

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Also try setting

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

on the html and body

edited Nov 12 '14 at 19:09

answered May 23 '13 at 02:53

Scott Selby

9,420
12
57
96

1

didnt work...If it helps narrowing it down..It looks like its only about 20-30px gap on tablets(ipad) and about a 50-60px gap on smartphones(vivid) – Lynx May 23 '13 at 02:58
don't know , without any html or css code posted , those were the best probably fixes , couldn't really tell you much more – Scott Selby May 23 '13 at 03:19
Yeah i understand I wish I could post code but cannot. I guess i can figure it out lol thanks again! – Lynx May 23 '13 at 03:25
What if I want it w/o margin therefore use container-fluid? – haneulkim Jul 29 '19 at 17:01
flashback to the past, 2019 thanking 2013 for this meta tag help haha – caro Oct 18 '19 at 22:34
The white bar error was taking over my page when I shrunk its width, changing the meta fixed it. – Naman Bansal Aug 10 '20 at 10:26

score 7 · Answer 4 · edited Nov 13 '16 at 02:25

7

I am having the same problem. I discovered the object that was causing the padding to be created was Bootstrap's "row" class.

If you add

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

to your CSS file/row objects this should fix at least one of items causing padding on your page.

edited Nov 13 '16 at 02:25

answered Sep 06 '15 at 18:27

Jacob

113
1
2

4

The row padding is intentional. You should be wrapping your rows in a `.container-fluid`. – Andrew May 28 '16 at 00:39

score 5 · Answer 5 · answered May 01 '19 at 20:36

5

I had this problem, no one of this answers, did not help me, i solved my problem with this way:

body { overflow-x: hidden; width: 100vw;}

answered May 01 '19 at 20:36

Abolfazl Miadian

3,099
2
19
15

score 1 · Answer 6 · answered Mar 30 '14 at 14:07

Generally this happens because you have a div breaking the boundaries of your set container width,could be a div or sections padding, margin, positioning.. you can use the inspector arrow or overflow:hidden on the container tag to see what section you might have breaking the width.

score 1 · Answer 7 · answered Mar 29 '18 at 05:53

I had a very similar issue recently which took me quite sometime to figure out. For me, it was not the usual row/container issue. I was using a form-control to render checkboxes manually. In Bootstrap, all textual elements with form-control have width:100% by default. Having many checkboxes online was causing them to spill over (invisibly) and causing this large white gap on the right. Surprisingly, it wasn't easy to debug this using Chrome Dev tools either.

I am now using the following solution to set the width to auto; (this answer helped):

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

and

.form-control-inline {
  width: auto;
}

Hope it helps someone

score 1 · Answer 8 · answered Aug 12 '20 at 10:15

My answer is an extension to @scott Shelby's answer.

I was able to get rid of the annoying white bar in the right by changing the meta of my file:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Even after changing the meta, I was getting the white bar on my table as it was overflowing in mobile devices.

To fix this, I made sure to make all elements like images, forms, etc. responsive.

For images, you can use class: "img-fluid"

and for tables, you can use class: table-responsive in the parent div.

score 0 · Answer 9 · answered Aug 14 '16 at 06:06

Also, check to see how you're using containers. They can't be nested, they will cause problems.

You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Source: http://getbootstrap.com/css/#overview-container

score 0 · Answer 10 · answered Dec 22 '17 at 20:15

I just had a very similar problem, and after spending some time, I realized I had applied CSS styling adding padding of 0px on both left and right of a container-fluid class, and therefore the styling overrode the default -15px padding needed on container-fluid to hold rows in their proper place.

score 0 · Answer 11 · answered Aug 29 '18 at 13:23

I've had a similar issue on mobile devices. The problem was that I had hidden an element on smaller screen sizes, but forgot its parent container. This container was still being rendered even though its content was empty, which lead to a big white gap on the right site. Hiding the parent element instead of the child solved this for me.

score 0 · Answer 12 · answered Dec 09 '20 at 08:58

I also have this issue with a gap on one side. After long time I found out I didn't follow the Bootstrap structure. You have to be careful. row cannot contain a container; this will also cause a gap issue. So: container cannot be nested. row cannot nest a container. row has to be in a container.

score 0 · Answer 13 · answered Sep 17 '22 at 01:45

0

/* Hide horizontal scrollbar */
.body, .head, .row, .col {
  overflow-x: hidden;
}

Doing this allows you to have a sticky navbar but still get rid of the whitespace!

answered Sep 17 '22 at 01:45

Taylor D

542
5
10

Twitter bootstrap white gap on right side of page

13 Answers13

Linked