using bootstrap containers for layout - html

Question

I am trying to create a layout that will resize properly, regardless of window size, resolution, etc. Here is what I am trying to do:
html, body {
border: 0px;
margin: 0px;
padding: 0px;
height:100%;
}
.container{
height:100%;
display:table;
width: 80%;
}
.row{
display: table-row;
}
#media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
.col-md-9 {
background: #A28DFF;
height:100%;
}
.navbar {
margin-bottom: 0;
}
</style>
<div class="container">
<div class ="row " style="border:0px solid red;">
<div class=" no-float" style="border:0px solid green; height:1px;">
<!-- code for my nav bar -->
</div>
</div>
<div class="row">
<div class="col-md-9 no-float" style="padding-top:50px">
<!-- code for my content -->
</div>
</div>
</div>
The problem is, though, that it does not resize properly. If the page becomes too small, the toolbar row and the content row split apart and do not resize with one another and do not stay together. Can anyone help with tips on how to make this layout responsive to resizing?
Here is a jsFiddle: https://jsfiddle.net/4qj7a3bh/13/

Answer 1

So we concluded that you are not very experienced with bootstrap so I made this code for you. Here is the example of how to use bootstrap also you should explore their grid system so you can better understand code. Also you should really avoid targeting bootstrap classes directly unless it's absolutely necessary.
<div class="container mainC">
<div id="toolbar" class="row text-center col-md-10 col-md-offset-1">
<h2>Toolbar section</h2>
</div>
<div id="content" class="row text-center col-md-10 col-md-offset-1">
<h2>Content section</h2>
</div>
</div>
#toolbar {
background: cyan;
}
#content {
background: yellow;
}
Here is codepen so you can see code in action:
https://codepen.io/anon/pen/vWaKxZ