How to change position of image in bootstrap column vertically by a few pixels

Question

I apologize in advance if this question has already been answered and I'm too much of a noob to apply to my specific situation.

My goal is to move the two images in below screenshot example so that they align with the grey background instead of sitting partially on top of the banner image. Basically I just want to move them down 10-20 pixels or so.

Happy to provide additional information as needed.

Screenshot example:

https://etractorimplements.com/wp-content/uploads/2020/11/example.png

Homepage:

https://etractorimplements.com/

Code:

<section class="feature_sec">
<div class="container">
<div class="row">
<div class="page-width">
<div class="collection-grid-items">
<div class="grid-service">
<div class="col-md-3 hidden-akk col-sm-4  wow fadeInDown" data-wow-delay=".7s">
<div class="widget-images slide-service ">
<a href="https://etractorimplements.com/product-category/rotary-tillers/"> <img  data-src="https://etractorimplements.com/wp-content/uploads/2020/08/heavy-duty-rotary-tiller-small.jpg" class="img-responsive lazy" alt="Rotary Tiller Heavy Duty" > </a>
</div>
</div>
<div class="service-grid col-xs-12 col-sm-4 col-md-3 wow fadeInLeft" data-wow-delay=".1s">
<div class="service service_1 row"> <i class="fa fa-dollar"></i><!--<i class="zmdi zmdi-money-box"></i>-->
<?php dynamic_sidebar('widget1home');?>
</div>
</div>
<div class="service-grid col-xs-12 col-sm-4 col-md-3 wow fadeInLeft" data-wow-delay=".3s">
<div class="service service-2 row"> <i class="fa fa-clock-o"></i> <!--<i class="zmdi zmdi-time zmdi-hc-fw"></i>-->
<?php dynamic_sidebar('widget2home');?>
</div>
</div>
<!--  <div class="service-grid col-xs-12 col-sm-3 col-md-3 wow fadeInLeft" data-wow-delay=".5s">                <div class="service service-2 row"> <i class="zmdi zmdi-thumb-up"></i>                  <?php //dynamic_sidebar('widget3home');?>               </div>              </div> -->
<div class="col-md-3 hidden-akk col-sm-3 wow fadeInDown" data-wow-delay=".7s">
<div class="widget-images slide-service ">
<a href="https://etractorimplements.com/product-category/rotary-tillers/"> <img  data-src="https://etractorimplements.com/wp-content/uploads/2020/08/heavy-duty-rotary-tiller-side-shift-small.jpg" class="img-responsive lazy" alt="Heavy Duty Rotary Tiller with Side Shift"> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

First things first, the structure of your HTML elements needs some changes. It's a rule of thumb that only col should be direct child of row . So if you want for example two images next to each other on one line, you should do something like this:

<div class="row">
  <div class="col-6">
    <img ... >
  </div>
  <div class="col-6">
    <img ... >
  </div>
</div>

Then, to move those images lower, you can either set margin to row inline using Bootstrap class mt-5 (margin top 5. note that 5 is maximum using Bootstrap classes). If this margin won't be enough, you can safely create multiple empty row with mt-5 to create extra space on top. OR same, just using CSS.

At the end your HTML would look something like this:

<div class="row mt-5">
<div class="row mt-5">
<div class="row mt-5">
<div class="row mt-5">
  <div class="col-6">
    <img ... >
  </div>
  <div class="col-6">
    <img ... >
  </div>
</div>
</div>
</div>
</div>

Bootstrap spacing

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.