Having problems on positioning of Bootstrap columns - css

Question

I am having a problem on displaying 3 Bootstrap columns in the ContentArea.
When I use Developer tools I can find them, they are at the bottom of the ContentArea, out of sight. I have tried adding the top attribute, and even the margin-top attribute but can't get those columns to move up into view in the ContentArea.
Can someone point out to me where I am going wrong?
$(document).ready(function () {
$('#menu-toggle').toggleClass('menu-hidden');
$('#menu-toggle').on('click', function () {
//alert();
$('#SidebarWrapper').toggleClass('menu-hidden');
$('#ContentArea').toggleClass('content-grew');
$('#SubCategories').toggleClass('slide-left');
});
});
body {
}
#TheLayoutContainer {
position:fixed;
z-index:1000;
width:100%;
height:100%;
border:1px solid black;
background-color:pink;
left:0px;
}
#menu-toggle {
}
#SidebarWrapper {
width:200px;
height:100%;
margin-top:0;
margin-left:0;
position:fixed;
z-index:2000;
background-color:black;
transition:1s;
}
#SidebarWrapper.menu-hidden {
width:50px;
transition:1s;
}
#ContentArea {
position: relative;
height: 100%;
background-color: purple;
z-index: 2000;
left: 325px;
margin-top:0px;
transition:1s;
padding-right:20px;
}
#ContentArea #SubCategories {
margin-left:-125px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#SubCategories.slide-left {
margin-left:-75px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#ContentArea.content-grew {
height: 100%;
left: 175px;
transition:1s;
}
#HeaderControlMenu {
height:45px;
width:100%;
background-color:yellow;
top:0px;
position:fixed;
z-index:2000;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div id="HeaderControlMenu">
<button id="menu-toggle" class="btn btn-success">Click</button>
</div>
</div>
<div id="TheLayoutContainer">
<div id="SidebarWrapper">
</div>
<div id="ContentArea">
<div id="SubCategories">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
</div>
</div>
</div>

Answer 1

In addition to what #Temani Afif said, you need to enclose the parent (element that contains the rows) in an element with class container.
<div class="container">
<div class="row">
<div id="HeaderControlMenu">
<button id="menu-toggle" class="btn btn-success">Click</button>
</div>
</div>
<div class="row">
<div id="TheLayoutContainer">
<div id="SidebarWrapper">
</div>
<div id="ContentArea">
<div id="SubCategories">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle
https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

Because none of the other answers and comments have mentioned all of the mistakes in your code, I will do that in my answer:
Don't use "naked" rows in Bootstrap. Do this instead: If you need a full-width container, use a div (or another suitable element like section etc.) with the class .container-fluid. Otherwise, use a div with the class .container and put your row(s) inside that container.
A Bootstrap .row must always have at least one Bootstrap column (.col-*) inside and all of your content must reside inside columns. Don't put any content directly into a .row.
.col-xs-* classes don't exist in Bootstrap 4 (anymore). Use .col-* instead.
Replace col-lg-12 col-md-12 col-sm-12 col-xs-12 with col-12 because that will do the exact same job. (because Bootstrap 4 is "mobile-first")
Replace col-md-4 col-lg-4 col-sm-4 col-xs-4 with col-4 because that will do the exact same job.
Side note: You can put some content directly into a Bootstrap .container or .container-fluid i.e. without using Bootstrap rows and columns. However, that would make sense only in a few special cases because usually your content wouldn't be responsive if you'd do that. The exceptions to this rule are things like Bootstrap navbars and jumbotrons.