title: Bootstrap nested layout
body: <p>You can see from the jfiddle link below what I'm trying to do and what the problem is. On a large screen I get a big space at the bottom which I can't remove. On the mobile I'd like each of the four images to take up the full screen but can't get it to work. Been trying to sort this for a day and I'm just going in circles now.  Any help would be appreciated.</p>
  
  <p>cheers
  mike.
  <a href="http://jsfiddle.net/batman13/wpnLjsuo/" rel="nofollow">http://jsfiddle.net/batman13/wpnLjsuo/</a>` 
          
              </p>
  
  <pre><code>            &lt;div class="col-sm-6 fill50 hidden-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');"&gt;
              &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive Big Screen &lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
               &lt;div class="col-xs-12 fill100 visible-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');"&gt;
              &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive mobile&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-6 fill50 hidden-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive2 Big Screen&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 fill100 visible-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive mobile&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row" style="height:50%"&gt;
              &lt;div class="col-sm-12 fill100 hidden-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');"&gt;
              &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive3 Big Screen&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row" style="height:50%"&gt;
              &lt;div class="col-xs-12 fill100 visible-xs" style=
               "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');"&gt;
              &lt;div class="carousel-caption"&gt;
                      &lt;h2&gt;Jonny 5 Alive3 Mobile&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="col-sm-6 fill50 hidden-xs" style=
      "background-image:url('http://ajsroofingsolutions.com/images/background.jpg');"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h2&gt;Jonny 5 Alive Big Screen&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 fill100 visible-xs" style=
       "background-image:url('http://ajsroofingsolutions.com/images/background.jpg');"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h2&gt;Jonny 5 Alive Mobile&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>