Bootstrap nested layout - twitter-bootstrap-3

Question

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.
cheers
mike.
http://jsfiddle.net/batman13/wpnLjsuo/`
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Big Screen </h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive mobile</h2>
</div>
</div>
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive2 Big Screen</h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive mobile</h2>
</div>
</div>
</div>
<div class="row" style="height:50%">
<div class="col-sm-12 fill100 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Big Screen</h2>
</div>
</div>
</div>
<div class="row" style="height:50%">
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile</h2>
</div>
</div>
</div>
</div>
<div class="col-sm-6 fill50 hidden-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Big Screen</h2>
</div>
</div>
<div class="col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive Mobile</h2>
</div>
</div>
</div>`

Answer 1

White space issue is because of this:
<div class="row" style="height:50%">
<div class="col-sm-12 col-xs-12 fill100 visible-xs" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile3</h2>
</div>
</div>
</div>
You are setting the height of the row and hiding the content, so the row is still showing. You need to hide the row so move your .visible-xs and .hidden-xs to the rows. After that wanting the full viewport height on the mobile is going to require you to set up a media query and move your inline height styling out into a CSS file. For example:
<div class="row visible-xs" id="test">
<div class="col-sm-12 col-xs-12 fill100" style=
"background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
<div class="carousel-caption">
<h2>Jonny 5 Alive3 Mobile3</h2>
</div>
</div>
</div>
CSS:
#test{
height: 50%;
}
#media(max-width: 500px){
#test{
height: 100vh;
}
}