Multiple container next to each other in Bootstrap4 - html

Question

I have a bootstrap layout which I am trying to develop as a dashboard.
I have a container-fluid like this
<div class="row">
<div class="col-10 col-md-3 col-lg-3 col-sm-6">
</div>
It;s height is 100vh and width 250px. I have applied a margin-left:-240px so that it hides and when the user hovers over the 10px div the whole div shows up using transitions.
My problem is to place a main div next to it,like so
How can I achieve this? Should I add another container or row?

Answer 1

You can you the new auto-layout col class..
<div class="container-fluid">
<div class="row">
<div class="sidebar bg-faded">Sidebar</div>
<div class="col bg-inverse text-white">
Content
</div>
</div>
</div>
Demo: http://www.codeply.com/go/pDFygIAy9G

Answer 2

Not sure if you want the sidebar to push the content to its right over when it opens or if you want the sidebar to overlay the content when it opens.
Here is a solution for an overlaid sidebar.
$( '.sidebar' ).on( 'click', function ( e ) {
$( this ).toggleClass( 'closed' );
} );
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.sidebar {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 100vh;
color: white;
background-color: black;
transition: left 500ms ease-in-out;
z-index: 5;
}
.sidebar.closed {
left: -240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="sidebar closed">
<p>
Sidebar
</p>
</aside>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
.col-md-6
</div>
<div class="col-xs-6">
.col-md-6
</div>
</div>
</div>