title: Applying margin and padding - bootstrap 5
body: <p>I have begun trying to use bootstrap 5, and I am thoroughly lost. Below, is a layout I have created (i.e. the blue elements, the sidebar has been taken from this <a href="https://dev.to/codeply/bootstrap-5-sidebar-examples-38pb" rel="nofollow noreferrer">source</a>) and I am trying to replicate the following <a href="https://dribbble.com/shots/15725741-Sales-Dashboard/attachments/7527877?mode=media" rel="nofollow noreferrer">layout</a>.</p>
  <p><a href="https://i.stack.imgur.com/2pyX7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2pyX7.png" alt="enter image description here" /></a></p>
  <p>I am basically trying to add a neat margin between the blue elements and and making L1, L2, L5 and L6 the same height, and L3 and L4 half of that height, and center the blue elements in the white space.</p>
  <p>From a <a href="https://jsfiddle.net/S23_P/vaLdfhzc/4/" rel="nofollow noreferrer">jsfiddle</a> I have did, the css3 code I have added for the individual styling of the blue elements is as follows:</p>
  <pre><code>.col{
      padding: 5rem;
      background-color: #33b5e5;
      border: 2px solid #fff456;
      border-radius: 10px;
      color: #fff;  
  }
  </code></pre>
  <p>To reduce the size of elements, I have tried reducing the padding but the elements are positioned more towards the top of the page. Adding any margin causes the elements to overflow onto new lines.</p>
  <p>Any help would be appreciated to get it close to the desired result. Thank you</p>