Bootstrap 3 - Why is row class is wider than its container?

Question

I just started using Bootstrap 3. I am having a difficult time understanding how the row class works. Is there a way to avoid the padding-left and padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

@Adrift is this still true? I'm not sure if you mean they don't work correctly, because I've been using them and they seem to work as they should. — Cereal, Mar 14 '14 at 22:39
@Cereal: Not anymore. This was [added](https://github.com/twbs/bootstrap/pull/11050/files#diff-2) in v3.0.2 — Adrift, Mar 14 '14 at 23:30
Probably not your problem but for anyone else having the same type of issue: Make sure you only have one class attribute on your divs. I accidentally doubled them up and got this same issue. — The One True Colter, Apr 24 '18 at 02:25

score 161 · Accepted Answer · edited Feb 04 '16 at 14:50

In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.

UPDATE:

You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.

Grid columns are separated by padding, not margin (in BS3) – Adrift Sep 23 '13 at 21:53 — Adrift, Sep 23 '13 at 21:53

score 31 · Answer 2 · edited Mar 16 '22 at 10:34

31

With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.

edited Mar 16 '22 at 10:34

logi-kal

7,107
6
31
43

answered Jan 12 '17 at 17:38

dbarma

311
3
2

this worked for me, even though initially I thought it didn't, that is because I had the developer's web console open which reduces the width, but apparently also messes this up. Using `.container-fluid` was also suggested here: http://stackoverflow.com/a/23616447/5272567 – Matthias Feb 02 '17 at 15:28
works, too, when the wrapping div is of position `absolute`. thanks for the hint – InsOp Oct 04 '17 at 00:07
if I could up-vote this answer multiple times... :) – rony36 Jul 25 '19 at 07:35
Same fix for Bootstrap 4. – Rob L Jan 05 '20 at 22:35

score 19 · Answer 3 · edited May 23 '17 at 12:34

19

See my reply below to similar post.

Why does the bootstrap .row has a default margin-left of -30px?

You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 31 '14 at 16:49

Kyle

387
3
3

2

Those classes do two different things, though they may seem to visually do it.Clear isn't as flexible in responsive situations and with grid systems the behavior of .row is correct. – Todd Baur Feb 11 '14 at 01:26
This solves overflowing content outside the wrapper. – Bhojendra Rauniyar Oct 07 '15 at 03:31
But better way is to wrap row with container. – Bhojendra Rauniyar Oct 07 '15 at 03:40
BEST ASWER! UP! – Anderson Bressane May 16 '18 at 14:46

score 19 · Answer 4 · edited Aug 09 '16 at 04:25

19

I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.

edited Aug 09 '16 at 04:25

batman

1,937
2
22
41

answered Aug 09 '16 at 03:42

Jeffrey

199
2
2

9

This worked like a charm! Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for me. – Michelle M. Mar 22 '18 at 10:06
1

Hey, it isn't recommended to change the margins on the bootstrap rows. They exist to cancel out the padding added by the .container or .container-fluid class. Maybe in your case, your code might have any of the following issues: 1. Someone removed default padding from the container which cancels outs the row's negative margin. 2. Or using box-sizing: "content-box" style is applied to the container. Make sure you have box-sizing: "border-box" – Aditya Apr 12 '22 at 11:08

score 5 · Answer 5 · answered Jun 03 '19 at 04:59

@Michelle M. should receive full credit for this Answer.
She said in one of the Comments:

Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for me.

You would need to update your first div Element like so:

<div class="row mx-auto" style="background:#000000">

No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.

score 1 · Answer 6 · answered Nov 18 '16 at 00:42

1

For any future developers debugging this problem:

Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.

answered Nov 18 '16 at 00:42

JSideris

5,101
3
32
50

Or, you have an old version of Bootstrap. For example, 3.0.0 distributed with VS2015. See https://github.com/twbs/bootstrap/issues/8959 – Adventure Jan 04 '17 at 17:32

Bootstrap 3 - Why is row class is wider than its container?

6 Answers6

Linked

Related