@sheriffderek's solution is solid. However, you can streamline it by incorporating a mix of flexbox and grid. This allows you to still utilize Bootstrap for certain aspects of the layout.
The Issue with Bootstrap
It's unlikely that you'll find a complete Bootstrap 4 solution. The issue lies in the fact that Bootstrap does not make use of CSS Grid for layouts. When creating a Grid with Bootstrap, the Grid functionality is essentially simulated using nested flex elements.
Here's how I would approach this.
Flexbox + Grid
Set up the main sections of the page using traditional layout rules and flexbox. I recommend excluding the header from this setup since it remains static and defaults to display:block, naturally pushing other content down as needed.
------------------------------------------------------------------
| header (display block) |
------------------------------------------------------------------
| | |
| | |
| nav (flex) | content (flex) |
| | |
------------------------------------------------------------------
Note: You could use Bootstrap here if desired, but I will demonstrate using display:flex for simplicity and ease of future reference.
header {
background-color: lightGray;
padding: 10px;
text-align: center;
}
#mainContent {
display:flex;
}
nav {
background-color: aqua;
padding: 10px;
text-align: center;
flex-basis: 33.3333%;
min-height: 100px;
}
#content {
background-color: tan;
padding: 10px;
text-align: center;
flex-basis: 66.6666%;
}
<header>Header Content</header>
<div id="mainContent">
<nav>Nav Bar</nav>
<section id="content">Content</section>
</div>
Standard Content Display
No need for complex grid or flexbox techniques for regular display. Block elements inherently push everything else down, which matches your mockup.
header {
background-color: lightGray;
padding: 10px;
text-align: center;
}
header {
background-color: lightGray;
padding: 10px;
text-align: center;
}
#mainContent {
display:flex;
}
nav {
background-color: aqua;
padding: 10px;
text-align: center;
flex-basis: 33.3333%;
min-height: 100px;
}
#content {
background-color: tan;
padding: 5px 10px;
text-align: center;
flex-basis: 66.6666%;
}
.search, .cards, .content, .profile {
background: rgba(0,0,0,0.2);
padding: 10px;
margin: 5px 0;
}
<header>Header Content</header>
<div id="mainContent">
<nav>Nav Bar</nav>
<section id="content">
<div class="search">Search</div>
<div class="cards">Cards</div>
<div class="content">Main Content</div>
<div class="profile">Profile</div>
</section>
</div>
Large Screens
For larger screens, utilize Media Queries to implement CSS Grid and overwrite the default block-level layouts.
header {
background-color: lightGray;
padding: 10px;
text-align: center;
}
#mainContent {
display: flex;
}
nav {
background-color: aqua;
padding: 10px;
text-align: center;
flex-basis: 33.3333%;
min-height: 100px;
}
#content {
background-color: tan;
padding: 5px 10px;
text-align: center;
flex-basis: 66.6666%;
}
.search,
.cards,
.content,
.profile {
background: rgba(0, 0, 0, 0.2);
padding: 10px;
margin: 5px 0;
}
@media screen {
/* typically, there would be specific sizes here, but we're demonstrating the effect of the media query */
#content {
padding: 5px;
display: grid;
grid-template-areas: "search profile"
"content profile"
"content cards"
"content cards";
}
.search,
.cards,
.content,
.profile {
margin: 5px;
}
}
<header>Header Content</header>
<div id="mainContent">
<nav>Nav Bar</nav>
<section id="content">
<div class="search">Search</div>
<div class="cards">Cards</div>
<div class="content">Main Content</div>
<div class="profile">Profile</div>
</section>
</div>
If you wish to adjust sizes explicitly, consider utilizing Grid's sizing system or updating the grid-template-areas with multiples of the same-named rows/columns.