Bootstrap Grid Fix - html

Question

Evening to everyone.
I'm currently in the process of designing a very basic user dashboard. I'm using Bootstrap framework to make the process easier. I have used the GRID system throughout the project. Nothing complex. Just basic grids.
This is what I have done so far Image
So you can see the problem. I have absolutely no ideas on how to get this one fixed. I'd like no WHITSPACES. You see this I'd like them all to be connected even. Is it even possible to do what I want to?
I have tried messing around with the margins but then that will break the responsiveness of the website. Any ideas or suggestions are really appreciated.
<div class="row no-pad">
<div class="col-sm">
<div class="tile" id="tile1">
<div class="tiletit">
<p class="titleend">First Tile</p>
</div>
<div class="tilebody">
<img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
</div>
<br/>
<h3 class="titleend text-center">Its your time <br> To have a drink!</h3>
</div>
</div>
<div class="col-sm ml-auto">
<div class="tile" id="tile2">
<h2 class="text-center" id="datetime">Monday, 31</h2>
<br/>
<h2 class="text-center" id="datetimee">7: 30</h2>
</div>
</div>
<div class="col-sm">
<div class="tile" id="tile3">
<div class="tiletit">
<p class="titleend">First Tile</p>
</div>
<div class="tilebody">
<img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
<h3 class="titleend text-center">Time to <br> Make a <i>change</i></h3>
</div>
</div>
</div>
<div class="col-sm ml-auto">
<div class="tile" id="tile2">
<h2 class="text-center" id="datetime">Monday, 31</h2>
<br/>
<h2 class="text-center" id="datetimee">7: 30</h2>
</div>
</div>
</div>
So yeah that block of code generates the first row of tiles, I just use the same code all over again to get the second row
Thanks in advance