Bootstrap 3: row class causes horizontal scrollbar

The Bootstrap CSS framework is since version 3, just like Foundation, a mobile first front-end framework. By switching to mobile first it finally can take on the competition with Foundation. Therefor I decided to give it a try on a new project that was recently started. Although being mobile first, I expected it to work for a full-width layout anyway. It does, but the row class causes a horizontal scrollbar. Why is this and how to fix this behaviour?

Rows behave like this when they aren’t placed in a container. See the Bootstrap documentation.

The Bootstrap CSS framework is since version 3, just like Foundation, a mobile first front-end framework. By switching to mobile first it finally can take on the competition with Foundation. Therefor I decided to give it a try on a new project that was recently started. Although being mobile first, I expected it to work for a full-width layout anyway. It does, but the row class causes a horizontal scrollbar. Why is this and how to fix this behaviour?

Problem

When using a row without container or wrapper, the page becomes too width and causes a horizontal scrollbar to appear.

Let’s take a look at the following HTML:

<div class="row">
<div class="col-xs-6 col1">col1</div>
<div class="col-xs-2 col1">col2</div>
</div>

This looks like:

bs3-problem

Demo: http://jsfiddle.net/dvdheiden/aXEMn/

Explaination

Theory
The reason for negative margins on the row class can be found on github, where the issue of not having negative margins is explained very clear and extensive.

Code
In mixins.less the following code can be found:

.row {
  margin-left:  (@grid-gutter-width / -2);
  margin-right: (@grid-gutter-width / -2);
}

This produces:

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

Solution

For full-width layout, we still should wrap the row in a wrapper/container div.

<div class="wrapper">
    <div class="row">
        <div class="col-xs-6 col1">col1</div>
        <div class="col-xs-2 col1">col2</div>
    </div>
</div>

Now add a wrapper class to your CSS in which we need to solve the -15px margin by adding a padding of 15px.

.wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

The result:

bs3-fix

Demo: http://jsfiddle.net/dvdheiden/a9QZN/

Problem

When using a row without container or wrapper, the page becomes too width and causes a horizontal scrollbar to appear.

Let’s take a look at the following HTML:

<div class="row">
<div class="col-xs-6 col1">col1</div>
<div class="col-xs-2 col1">col2</div>
</div>

This looks like:

bs3-problem

Demo: http://jsfiddle.net/dvdheiden/aXEMn/

Explaination

Theory
The reason for negative margins on the row class can be found on github, where the issue of not having negative margins is explained very clear and extensive.

Code
In mixins.less the following code can be found:

.row {
  margin-left:  (@grid-gutter-width / -2);
  margin-right: (@grid-gutter-width / -2);
}

This produces:

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

Solution

For full-width layout, we still should wrap the row in a wrapper/container div.

<div class="wrapper">
    <div class="row">
        <div class="col-xs-6 col1">col1</div>
        <div class="col-xs-2 col1">col2</div>
    </div>
</div>

Now add a wrapper class to your CSS in which we need to solve the -15px margin by adding a padding of 15px.

.wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

The result:

bs3-fix

Demo: http://jsfiddle.net/dvdheiden/a9QZN/

7 Replies to “Bootstrap 3: row class causes horizontal scrollbar”

  1. I was so frustrated when even using a very popular framework bootstrap will cause this issue. Albeit It was my mistake because mistakenly I’ve wrapped inside a , Just included row inside container and the bottom scrollbar vanished.

    Any way helpful post.

    1. A lot of developers want the grid in different elements and not always want to use the container class. With this css addition you can add the grid to every element without the restrictions of the container class.

  2. This was pretty helpful. In my case, the values had to be doubled to 30 px to match the gutter width, because at 15px there was still a horizontal scrollbar.
    Cheers

  3. Hello, I’ve tried your solution as mentioned above, I’ve tried MA’s solution aswell, but what ever I do I experience no luck.

    Could you please tell me what I am doing wrong?
    Would be absolutely appreachiated!

    1. Probably you should just put your row in a div with the “container” or “container-fluid” class. If that doesn’t solve the problem for you, then please provide a working example (for example on Bootply.com).

      1. Hello Dvdheiden, thank you for your latest reply.
        I wasnt able to eliminate the 15 px, but overflow-x:hidden on the body tag, did the trick.

        Thanks anyway!

Leave a Reply

Your email address will not be published. Required fields are marked *