Spacing between bootstrap elements 4

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}