Bootstrap 3 - Why is row class is wider than its container?
Twitter BootstrapTwitter Bootstrap-3Twitter Bootstrap Problem Overview
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>
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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.
Solution 2 - Twitter Bootstrap
With bootstrap 3.3.7 this problem is solved wrapping the .row
with .container-fluid
.
Solution 3 - Twitter Bootstrap
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.
Solution 4 - Twitter Bootstrap
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.
Solution 5 - Twitter Bootstrap
@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.
Solution 6 - Twitter Bootstrap
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.