title: How to overlay more than 2 divs (with bootstrap if possible)?
body: <p>I'm trying to overlay 4 divs on one another with z-index</p>
  
  <p>It seems to works for only 2 divs</p>
  
  <p>When I try to blur the main bg (1st bg) it's affecting all of the divs</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here's the code:</p>
  
  <p>HTML-</p>
  
  <pre><code>&lt;div class="bg1"&gt;
    &lt;div class="bg2"&gt;
      &lt;div class="overlay"&gt;
        &lt;div class="text-layer"&gt;
          &lt;p&gt;Eleven years ago, wizards rejoiced all over the world, and Muggles (non-magic folk) were confused. They celebrated because He-Who-Must-Not-Be-Named was defeated. In other words, Voldemort (the evilest wizard around) killed Harry Potter's parents,
        but for some strange reason, he couldn't kill little baby Harry. Now Voldemort seems to have disappeared. Overnight, baby Harry has become a hero – "The Boy Who Lived." Having lost his family and home, Harry also has become an orphan. Dumbledore
        (the principle of Hogwarts School of Wizardry and Witchcraft), Professor McGonagall (a teacher at Hogwarts), and Hagrid (a groundskeeper at Hogwarts) find a home for baby Harry with his Muggle extended family, the Dursleys.&lt;/p&gt;
  
          &lt;p&gt;Cut to present day, when ten-year-old Harry lives with his super-mean aunt and uncle and their son Dudley. When they go to the zoo for Dudley's birthday, Harry encounters a sympathetic snake. He's able to speak to the friendly reptile and somehow
        seems to have removed the glass from its cage, so it can go back to Brazil. After the trip to the zoo, mysterious letters start arriving for Harry. His uncle, Mr. Dursley, is furious and tries to keep them from Harry. But the letters keep arriving
        at such a rapid rate that, the evening before Harry's eleventh birthday, his uncle takes the whole family to a deserted island to escape all of the mail.&lt;/p&gt;
  
          &lt;p&gt;They can't hide for long, though; Hagrid shows up on Harry's birthday to deliver the letter, and the news that Harry's a wizard and has been admitted to the Hogwarts School of Witchcraft and Wizardry. The next day he takes Harry to shop for school
        supplies at Diagon Alley, where Harry learns more about the wizarding world. He meets Malfoy (a bully) and Hogwarts' new Defense Against the Dark Arts professor, Quirrell. Harry also buys his first wand. Sweeeet. Hagrid also picks up a mysterious
        package at Gringotts, the goblin bank.&lt;/p&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS-</p>
  
  <pre><code>.bg1 {
   position: relative;
   background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Flowers/Sun_Flower_HD_Image.jpg");
   left: 0px;
   top: 0px;
   z-index: -1;
   filter: blur(4px);
   -webkit-filter: blur(4px);
  }
  
  .bg2 {
   background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
   height: 100%;
   z-index: 1;
   position: relative;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-filter: opacity(30%);  /* Safari 6.0 - 9.0 */
   filter: opacity(40%);
  }
  
  .overlay {
   z-index: 2;
   position: relative;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
  }
  
  .text-layer {
   height: 100%;
   height: 100vh;
   z-index: 300 !important;
  }
  </code></pre>
  
  <p>Here's the jsfiddle- <a href="https://jsfiddle.net/bwcnfvm7/5/" rel="nofollow noreferrer">jsfddle</a></p>