title: Applying background color to to whole html page
body: <p><a href="https://i.stack.imgur.com/sCPkJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sCPkJ.png" alt="enter image description here"></a>I have an HTML page where I have a div called <code>container</code>, I'm trying to use bootstrap here. Inside the container, I have a div called <code>row</code>. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hellow world to cover the whole page.</p>
  
  <p>Here is the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 10px;
  }
  .row {
    background-color: darkgray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Bootstrap Example&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/homePage.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt; Hello World! &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>