HOLYGRAIL Bootstrap 4.2.1 Flex-box

Holy grail layout, Bootstrap 4.2.1, Flex-box, split.js

by D7460N

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.10/split.min.js"></script>
<body class="container-fluid d-flex flex-column header px-0">
    <nav class="page-header navbar navbar-expand-md navbar-dark p-1">HEADER</nav>
    <main class="row flex-fill no-gutters flex-nowrap">
        <div class="col d-flex flex-column home p-1">HOME</div>
        <div class="col d-flex flex-column filter p-1">FILTER</div>
        <div class="col d-flex flex-column content split-horizontal results p-1">RESULTS</div>
        <div class="col d-flex flex-column content split-horizontal profile p-1">PROFILE</div>
        <div class="col d-flex flex-column content split-horizontal details p-1">DETAILS</div>
    </main>
    <div class="page-footer footer p-2">FOOTER</div>
</body>

CSS

/********************
    LAYOUT
*********************/

html,
body {
    min-height: 100vh;/* force footer to bottom of browser */
    height: 100%;/*for IE11*/
    background-color: #252830;
    color: rgba(255,255,255,0.5);
}
.header, .footer {background: rgba(0,0,0,0.0);}
.gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    flex: 0 0 10px;
}

.home    {flex: 1 1 100px; background: rgba(0,0,0,0.1);}
.filter  {flex: 0 0 200px; background: rgba(0,0,0,0.2);}
.results {flex: 1 1 auto; background: rgba(0,0,0,0.3);}
.profile {flex: 1 1 auto; background: rgba(0,0,0,0.4);}
.details {flex: 1 1 auto; background: rgba(0,0,0,0.5);}

.gutter.gutter-horizontal {
		transition: 250ms opacity;
    cursor: col-resize;
		opacity: 0.1;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}
.gutter.gutter-horizontal:link,
.gutter.gutter-horizontal:visited,
.gutter.gutter-horizontal:hover,
.gutter.gutter-horizontal:active,
.gutter.gutter-horizontal:focus {
		opacity: 1.0;
}

JavaScript

Split(['.home', '.filter', '.results', '.profile', '.details'], {
		
})