I recently started experimenting with bootstrap 5, but I'm feeling quite disoriented. The layout I have created includes some blue elements (borrowed the sidebar from this source) and now I am attempting to replicate this design.
https://i.sstatic.net/2pyX7.png
My goal is to create a clean margin between the blue elements, ensure that L1, L2, L5, and L6 are of equal height, while L3 and L4 are half that height, and centered within the white space.
In a jsfiddle experiment, I applied the following CSS code for custom styling of the blue elements:
.col{
padding: 5rem;
background-color: #33b5e5;
border: 2px solid #fff456;
border-radius: 10px;
color: #fff;
}
Despite trying to reduce element sizes by adjusting padding, they keep moving towards the top of the page. Adding margins causes them to break into new lines. Any assistance in achieving the desired result would be greatly appreciated. Thank you.