Bootstrap 4 how to create a responsive dashboard layout? - html

Question

I have an idea for a dashboard which I like to create using Bootstrap. Please find the following image of the layout I would like to achieve using Bootstrap 4.
Layout Image
I can make everything happen but except the left box highlighted in red. Following is my current code and appreciate if anyone could help.
JSFIDDLE
HTML
<div class="d-flex">
<!-- Side Nav Start -->
<ul class="navbar-nav sidebar">
<!-- Nav Item - Dashboard -->
<li class="nav-item active d-flex justify-content-center mt-12" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="#">
Side Menu
</a>
</li>
</ul>
<div class="content-wrapper d-flex flex-column">
<div class="content">
<nav class="navbar navbar-top navbar-expand navbar-light bg-white topbar mb-4 static-top border-bottom">
<!-- Topbar Search -->
<div class="logo mr-auto ml-md-3 my-2 my-md-0 mw-100">Header</div>
</nav>
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<div class="row">
<div class="col-sm-4 mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.navbar-nav {
&.sidebar {
width: 5.6rem !important;
min-height: 100vh;
background-color: #000;
.nav-item {
display: block;
width: 100%;
text-align: left;
margin: 15px 0;
&.active {
.nav-link {
color: #fff;
position: relative;
}
}
&:hover {
.nav-link {
color: #fff;
}
}
.nav-link {
color: #5C6A7C;
}
}
}
}

Answer 1

<div class="bg-info">
<div class="container" style="padding: 20px">
<p>Put your Navbar here </p>
</div>
</div>
<div class="row">
<div class="col col-md-2 bg-warning" style="height: 100vh">
<h4>Side Nav</h4>
</div>
<div class="col col-md-10">
<div class="container">
<!-- for the padding in the main body -->
<!-- an other row and cols for the inner content -->
<h5 class="text-center">Main content</h5>
<br /><br />
<div class="row">
<div class="col col-md-4">
<div class="container bg-danger" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
<div class="col col-md-4">
<div class="container bg-success" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
<div class="col col-md-4">
<div class="container bg-primary" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
</div>
</div>
</div>
</div>
The above code snipet would help.
using .row and .col classes will achieve the purpose.