Bootstrap row class contains margin-left and margin-right which creates problems

Question

I am using Bootstrap \'row\' class to align divs one on top of another, which works fine but

.row {
   margin-left: -15px;
   marg         


        

Answer 1

I used div class="form-control" instead of div class="row"

That fixed for me.

Answer 2

You can use row-fluid instead of row, then you won't have this problem. (for previous versions of bootstrap)

I am not sure of recent versions 3, any way :

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.

For more information on this Why does the bootstrap .row has a default margin-left of -30px?

Answer 3

Old topic, but I think I found another descent solution. Adding class="row" to a div will result in this CSS configuration:

.row {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

We want to keep the first 3 rules and we can do this with class="d-flex flex-wrap" (see https://getbootstrap.com/docs/4.1/utilities/flex/):

.flex-wrap {
    flex-wrap: wrap !important;
}
.d-flex {
    display: -webkit-box !important;
    display: flex !important;
}

It adds !important rules though but it shouldn't be a problem in most cases...

Answer 4

The .row is meant to be used inside a container. Since the container has padding to adjust the negative margin in the .row, grid columns used inside the .row can then adjust to the full width of the container. See the Bootstrap docs: http://getbootstrap.com/css/#grid

Here's an example to illustrate: http://bootply.com/131054

So, a better solution may for you to place your .row inside a .container or .container-fluid

Answer 5

Are you using Bootstrap 3? My version of the css has -15px, not -13px. In any case, I've simply done what you've down, and overwritten the style. I believe it's because the .container class has a 15px padding on the left and right, and this negative margin on the rows will pull that content back out to the edge of the container.

Answer 6

I was facing this same issue and initially, I removed the row's right and left -ve margin and it removed the horizontal scroll, but it wasn't good. Then after 45 minutes of inspecting and searching, I found out that I was using container-fluid and was removing the padding and its inner row had left and right negative margins. So I gave container-fluid it's padding back and everything went back to normal.

If you do need to remove container-fluid padding, don't just remove every row's left and right negative margin in your project instead introduce a class and use that on your desired container