Bootstrap 4 Columns And Rows Producing Unwanted Padding

I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like

Solution 1:

Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements

See the Bootstrap documentation about gutters.

<divclass="row no-gutters"><divstyle="background-color:#aaa"class="col-sm-3">a</div><divstyle="background-color:#bbb"class="col-sm-3">b</div><divstyle="background-color:#ccc"class="col-sm-3">c</div><divstyle="background-color:#ddd"class="col-sm-3">d</div></div>

Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.

Solution 2:

Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."

You should try to do :

<divclass="row no-gutters"><divclass="col-6"><img... /></div><divclass="col-6"><img... /></div></div>

Solution 3:

Add below class hope it works for you.

.margin0-padding0 {
    margin-left: 0px!important;
    margin-right: 0px!important;
    padding: 0px!important;
}