title: Z-index and bootstrap
body: <p>I'm trying to z-index different "containers" in bootstrap in order for them to be placed on top of each. </p>
  
  <p>I've classed the different containers and provided them different z-index positions. Nothing happens. </p>
  
  <p>Here is the code and the css</p>
  
  <p>Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;Bootstrap test&lt;/title&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href="css/bootstrap.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="stylesheet.css" type="text/css"&gt;&lt;/link&gt;
  
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-sm-7 col"&gt;
                  &lt;h1&gt;fælælflflflflf&lt;/h1&gt;
                  &lt;p&gt;
                      fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                      gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container behind"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-sm-7 col"&gt;
                  &lt;h1&gt;fælælflflflflf&lt;/h1&gt;
                  &lt;p&gt;
                      fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
                      gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: trebuchet ms;
      color:#666666; }
  
  .container {
      z-index: 1;
  }
  
  .col {
      margin:20px;
      padding-bottom:20px;
      background-color:white;
      box-shadow:20px 20px 10px #0033cc;
  }
  
  .behind {
      padding-bottom:40px;
      z-index: 2;
  }
  </code></pre>
  
  <p>Note: i've added some padding in order to see containers layered on top of each other. </p>
  
  <p>Thanks for your reply</p>