Twitter Bootstrap: White Space on Left and Right Side in Smaller Screen Widths

Twitter Bootstrap: white space on left and right side in smaller screen widths?

In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

If you just want to remove the white space on a certain element or class, add these margins to it:

 margin-left:-20px;
 margin-right:-20px;

Twitter bootstrap white gap on right side of page

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.

Big white Space on the right side On Screen Size 767px and Below Bootstrap responsive

The code snippet isn't working - you'd need to add the html to have help debugging this specific case.

However, the key to solving this problem (and others like it - they will come up all the time if you're working with HTML/CSS) will be in learning how to debug the HTML/CSS for yourself - the best approach will be to learn how to use 'inspect element' or 'Firefox Developer Browser' with Firefox or 'chrome-devtools' in Chrome. Some articles to help:

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Twitter bootstrap white gap on right side of page

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.

White Space Right Side of Bootstrap Website

I've added :

 html  {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}

Into your CSS at the very top above the other classes and it seemed to fix your issue.

Problem with whitespace in Bootstrap navbar on small screens

Just DO one thing which I have discussed below,

<button class="navbar-toggler navbar-toggler-right ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle Navigation">

add This Html in Container after logo So it is looks like as you want

Bootstrap container is not full width (white spaces on left and right side of screen)?

The simple answer here is to use container-fluid.

Please check this fiddle: https://jsfiddle.net/ya6z789x/1/

As you can see the first container class (simply container) has a set width of 1170px at larger viewports, 970px at slightly smaller and so on (it reduces as you reduce viewport size).

The second example, container-fluid, is set to 100% width of its parent. Meaning if your header element doesn't have a width defined, the container-fluid class will stretch to the full width of the window.

Alternatively, if your header element had a width of say 900px (third example), placing a container-fluid directly as a child of it will make the container-fluid element have a width of 900px. Note, you may need to expand the viewport of the fiddle to see this in action.

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Navbar created with bootstraps has white space on left and right

try overwriting the navbar-default on your own style.css.

.navbar-default{  background-color: /*your color here*/  !important;}

---

Related Topics