Spacing between bootstrap elements 4 - html

Question

Our website use bootstrap 4.x
Currently is:
How to add spacing between this elements?
Below is full code Bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="banner-slider-top banner-slider-cat">
<div class="row">
<div class="d-none d-xl-block col-lg-3 bn-menu">menu</div>
<div class="col-12 col-xl-9">
<div class="row no-gutters bn-inner">
<div class="col-12 col-sm-12 col-md-7">
<div class="item-bn-slider-05 slider-2 lazyload">
<div class="owl-carousel owl-theme">
<div class="item-slider">
<div class="img-slide">slider</div>
<div class="block-center">
<p class="text-small animated fadeInDownSlide"><span style="color: #3078a6;">LIMITED EDITION</span></p>
<h2 class="text-large animated fadeInDownSlide delay-0s5">Baby Hipseat<br>Carrier<br>Waist Stool</h2>
<div class="text-normal animated fadeInDownSlide delay-1s">
<div>Discount</div>
<p>40% Off</p>
</div>
<div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Shop now</span></a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" xml="space">
// <![CDATA[
require(['jquery', 'owlWidget'], function($) {
$(function() {
$('.item-bn-slider-05').owlWidget({
autoplay: true,
items: 1,
autoplayTimeout: 8000,
dots: true,
nav: true,
loop: true,
margin: 0
});
});
});
// ]]>
</script>
</div>
<div class="col-12 col-sm-12 col-md-5">
<div class="row no-gutters">
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image1</div>
</div>
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image2</div>
</div>
<div class="col-12 col-sm-12">
<div class="item-bn-inner">image3</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12">
<div class="row no-gutters">
<div class="col-12 col-sm-12 col-md-7">
<div class="item-bn-inner">image4</div>
</div>
<div class="col-12 col-sm-12 col-md-5">
<div class="row no-gutters">
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image5</div>
</div>
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like an effect similar to:
Could someone please help how can i do this? I will be grateful for any hint. I searched the forum but unfortunately I don't see any similar solution here. Thanks again to everyone for the help.

Answer 1

So you should add a padding to the main container:
.banner-slider-cat .bn-inner{
padding:0 10px 10px 0;
}
The padding is just on right and bottom because you'll have a margin on items on left and top:
.item-bn-inner, .slider-2 {
margin-left: 10px;
margin-top: 10px;
}
The you have to resize the "Combo 5x newborn..." container to 182px:
.item-bn-inner .item-bn{
height: 182px;
}

Answer 2

You should add margin to the elements, you could do margin-right, margin-top etc. Margin will create extra space between an element ( class ) you put it on.
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin: 10px;
In your case:
.item-bn-inner{margin:10px}