Bootstrap 4: remove columns margin gutter

Question

I'm using Bootstrap 4 in an Angular project and i have noticed that the framework automatically put some left margin when using the .col class. The problem is that i can't remove that margin because even the inspector tell me that margin is none.

screen

How do i do?

Answer 1

Add the no-gutters class to the .row.

That removes the gutter.

Alternatively, you can use the classes p-0 for "padding:0" or m-0 for "margin:0" on the columns.

Answer 2

Add a class .noMargin to any div which should have zero margin , define it in css with 'margin:0px',

You can use the same class wherever you want.

Or

If you don't want to do it by yourself you can use no-gutters in .row class