Bootstrap 4 columns and rows producing unwanted padding [duplicate] - html

Question

This question already has answers here:
Remove padding from columns in Bootstrap 3
(26 answers)
Remove gutter space for a specific div only
(11 answers)
Closed 4 years ago.
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 the design:
This is how I structured my HTML:
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-12">
<img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
</div>
<div class="col-md-12">
<img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
</div>
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<h1>#php(get_field('front-page__title'))</h1>
<div>#php(get_field('front-page__slogan'))</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="container">
<div class="zeo-cases-button">
#php(get_field('front-page__button--text'))
</div>
</div>
</div>
<div class="col-md-3">
<div class="container">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
But this is resulting in this:
My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!

Answer 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.
<div class="row no-gutters">
<div style="background-color:#aaa" class="col-sm-3">a</div>
<div style="background-color:#bbb" class="col-sm-3">b</div>
<div style="background-color:#ccc" class="col-sm-3">c</div>
<div style="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.

Answer 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 :
<div class="row no-gutters">
<div class="col-6">
<img ... />
</div>
<div class="col-6">
<img ... />
</div>
</div>

Answer 3

Add below class hope it works for you.
.margin0-padding0 {
margin-left: 0px !important;
margin-right: 0px !important;
padding: 0px !important;
}