Bootstrap Grid Horizontal alignment and collapse

I'm completely new to learn bootstrap grid and my guide has mainly been using website guides and tailoring them to this example.

The expected output is supposed to look like this when fullscreen: Expected-FullSize

and like this when collapsed to a smaller size: Expected-Collapse

My main problem is trying to get the "Aside" and "Section" parts to stack on top of each other inside the "Article" part. I can't even get it to line up in a row with the "article" part anymore. The other details I'll work out on my own, but this part I've been struggling with for awhile.

CSS:

body {
background-color: black;
font-size: 2em; 
text-align: center;

}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
}

.nav {
  background-color: khaki;
  height: 50px;
  text-align: center;
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;

}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;

}

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="mystyle-Test2.css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="header">Header</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="nav">Nav</div>
        </div>
        <div class="col-md-8 col-sm-12">
            <div class="article">Article</div>
        <div class="col-md-2 col-sm-12">
            <div class="aside">Aside</div>
        <div class="col-md-2 col-sm-12">
            <div class="section">Section</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="footer">Footer</div>
        </div>
    </div>
</div>

Solution

So, I did quite a bit with your code and I'll just post it back to you and I'll try to explain as many changes as I can remember :) I wouldn't call myself an expert with bootstrap either. So these are fun to do.

First, I noticed that <link href= wasn't working in the head. So, I changed that to bootstrap CDN and the latest version <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Be sure to match the Javascript from the same source if you want to use collapsable navigation or carousels or something like that later on...

Next, I changed the grid to look more like this:

<div class="container-fluid">
      <div class="row">
           <div class="header">Header</div>
      </div>
      <div class="row">
           <div class="navigation-bar">Nav</div>
      </div>


 </div>
 <div class="container-fluid">
 <div class="row">
           <div class="col-sm mbody">
                <div class="article">Article</div>
           </div>
           <div class="col-sm mbody">
                <div class="row">
                     <div class="aside">Aside</div>
                </div>
                <div class="row">
                     <div class="section">Section</div>
                </div>
           </div>
      </div>
 </div>
 <div class="container-fluid">
      <div class="row">
           <div class="footer">Footer</div>
      </div>
 </div>

Really, what we're wanting is two rows inside of a single column These changes got us close to what we want. The next thing was to give all of your inner div's 100% width

body {
 background-color: black;
 font-size: 2em; 
 text-align: center;

}
.mbody {
 margin: 0; 
 padding: 0; 
}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
  width: 100%; 
}

.navigation-bar {
 background-color: khaki;
 height: 50px;
 text-align: center;
 width: 100%; 
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;
  width: 100%; 


}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;
  width: 100%; 

}

Notice that finally, I changed the "nav" class to "navigation-bar" so your styling will apply, since "nav" is a predefined class in bootstrap already and overrides your styling. Then I added the "mbody" class to the two columns and set the margins and padding to 0 to make everything fit together with no space on the left or right.

My result is looking like what you posted in the two pictures above. Hope this is helpful. :)