Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap white gap on right side of page

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

http://i.imgur.com/JeRRRqq.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

like image 850
Lynx Avatar asked May 23 '13 02:05

Lynx


People also ask

Why is there white space on the side of my website Bootstrap?

I've done plenty of digging but the only answer I can find is that this happens when you haven't wrapped all of your . row classes in a . container or .

How do I change the spacing between lines in bootstrap?

If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.

Is twitter bootstrap responsive?

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

Does twitter use bootstrap?

At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.


2 Answers

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.

like image 104
Nicola Pedretti Avatar answered Oct 05 '22 17:10

Nicola Pedretti


Have you tried:

html, body { overflow-x: hidden; } 

Can you post a fiddle?

like image 36
Giulio Avatar answered Oct 05 '22 18:10

Giulio