Applying margin and padding - bootstrap 5 - css

Question

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 source) and I am trying to replicate the following layout.
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.
From a jsfiddle I have did, the css3 code I have added for the individual styling of the blue elements is as follows:
.col{
padding: 5rem;
background-color: #33b5e5;
border: 2px solid #fff456;
border-radius: 10px;
color: #fff;
}
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.
Any help would be appreciated to get it close to the desired result. Thank you

Answer 1

try to give margin to .col and remove p-5 from col-10
.col {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff456;
border-radius: 10px;
color: #fff;
margin: 0.2rem;
}

Answer 2

At a first look, don't use padding to play with the height of the elements, use height itself.
Also, don't apply css directly to the col class, it'll get harder to maintain. Use a different class name, and differentiate your cols based on them. Let's say L1, L2, L5 and L6 could be class big-card, and L3, L4 could be small-card. Apply a fixed height to these both. And remove all padding initially from the col.
.small-card {
height: 200px;
}
.big-card {
height: 400px;
}
Of course, adjust the height as per necessary. Then add padding according to the content that you put within the cards.
Then for the space between cards, use the gap class of bootstrap. Append this class along with row. Like: row gap-3 will add a space of 16px between each card. (Of course, you'll need to have the padding of the cards removed first as I said, otherwise the layout will break because the width of the cards will be more than you are allowing).