bootstrap container-fluid - remove margins the right way (overflow)

Question

How can I remove all margins from boostrap container-fluid class and its rows?

.container-fluid { padding: 0;}

This does basically what I want, but it adds 20px overflow to body. So should I just do this:

body, html { overflow-x: hidden; }

Do something with .container-fluid > .row

Answer 1

To be specific about your question:

The .row has a negative left and right margin equal to the left/right padding value of the col-*-*, that is why there are horizontal scrollbars when you fiddle with the grid without understanding how it works. If you manipulate the column classes with zero padding on the left and right or with some other value, the negative margin on the .row must be equal to the the padding on the left and right of the column classes. The .container also has padding that matches the value of the column classes to prevent the scrollbars.

So the answer is: .container-fluid > .row -- make the margin:0 on the left and right if you remove the padding on the left and right of the column classes. If all is zero, then you can just adjust the .container or .container fluid with zero padding on the left and right, but if you use different values > 15px L & R, then it's a different story as the .container/.container-fluid will need to be adjusted if the left and right padding on the columns is greater than 15px.

There are no margins on the col-*-* it's padding which is quite different when you use box-sizing:border-box globally as Boostrap 3 does.

If you want a tight grid, remove all padding on the left and right of all column classes and then remove the negative margin on the left and right of the .row, and then you can remove the left and right padding on the .container.

DEMO: http://jsbin.com/jeqase/2/

Removes all padding and negative margin for a tight grid and full width of the .container with any surrounding element (body, html, whatever) with the class .alt-grid:

.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}

/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}

You can also do this with .container-fluid - the only thing to zero out is the left and right padding.

Answer 2

If you want to remove margin, overriding the Bootstrap class or div (container-fluid, html, body) is not the best thing to do. I think it's better to create a separate class and add it in elements. If you want to remove all margins :

.remove-all-margin{
    margin:0 !important;
}

If you want to remove all margins and paddings :

.remove-all-margin-padding{
    margin:0 !important;
    padding:0 !important;
}

Answer 3

it is always a better way to add a custom class to the elements that you want to get rid of the margins rather than overriding all bootstrap elements.

row.no-margin {
    margin:0 !important;
}