Menu
To group the columns together, you need to create rows. To create rows, add a div with a class=“row” that encases the column code. Rows must always be placed inside of a container.
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
The Container padding of 15px is used to counteract the negative margins of the Row. This is to keep content evenly aligned on the edges of the layout. If you don't put a Row in a Container, the Row will overflow it's container, causing an undesirable horizontal scroll.
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 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.
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
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.
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.
@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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With