<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
html,
body {
height: 100vh;
}
.wrapper{
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
"m m m h h h h h h h h h"
"m m m c c c c c c c c c"
"f f f f f f f f f f f f";
}
.header{
background-color: aqua;
grid-area: h;
}
.menu{
background-color: blue;
grid-area: m;
}
.content{
background-color: azure;
grid-area: c;
}
.footer{
background-color: black;
color: #fff;
grid-area: f;
}
