How I envision it to appear:
https://i.sstatic.net/Hrlv4.png
I'm facing a challenge in Bootstrap 4 where I want to create space between the columns both horizontally and vertically without disrupting the breakpoints. I have tried adjusting margins in BS4 without much success, as it caused issues with the heading and background-color. Additionally, I need the two horizontal columns to be of equal height.
If you view the snippet, the columns may not display correctly due to the snippet output size. Here is how it should look on non-mobile: screenshot (or expand the snippet)
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.row {}
.head {
background-color: aqua;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" > <nav class="navbar-static-top"> Nav </nav> <div class="container-fluid"> <div class="row p-1"> <div class="col black"> <div class="row"> <div class="col head"> HEADING 0 COLUMN </div> </div> <p>aaaa<br> aaaa</p> </div> </div> <div class="row row-eq-height p-1"> <div class="col-md-6 black"> <div class="row"> <div class="col head"> HEADING 1 COLUMNS BLACK </div> </div>bbbb<br> bbbb<br> </div> <div class="col-md-6 red"> <div class="row"> <div class="col head"> HEADING 2 CLOUMNS RED </div> </div>cccc </div> </div> <div class="row p-1"> <div class="col black"> dddd </div> </div> <div class="row p-1"> <div class="col black"> eeee </div> </div> <div class="row row-eq-height p-1"> <div class="col-md-6 black"> <div class="row"> <div class="col head"> HEADING 3 COLUMNS BLACK </div> </div>ffff<br> ffff<br> </div> <div class="col-md-6 red"> <div class="row"> <div class="col head"> HEADING 4 CLOUMNS RED </div> </div>hhhh </div> </div> </div>