Is there a way to split my screen into four sections with equal width and height using bootstrap 4 and flexbox?
Each section should occupy 50% of the screen's width and height.
Additionally, I need these sections to be responsive in terms of their content.
I have attempted the following code without achieving the desired result:
<div id="app" class="flex-container">
<div class="flex-item" style="background-color:red"></div>
<div class="flex-item" style="background-color:blue"></div>
<div class="flex-item" style="background-color:yellow"></div>
<div class="flex-item" style="background-color:grey"></div>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 1;
}