bootstrap grid to fill page width and height - html

Question

I have the following 4 squares (two rows and two columns):
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
I would like them to be displayed in a 4 square fashion and that the grid takes the whole width and height of the page. I also want it to be responsive and I don't want any spaces between each square.
I tried setting the css on my section tag like this:
section
{
height: 100vh;
}
But that had no effect. Does anybody know how to achieve this please?
Thank you

Answer 1

Try this as the CSS
section#gallery
{
height:100%;
width:100%;
}
div.row
{
height:50%;
}
div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
width:50%;
}

Answer 2

I think you are looking for something like this? https://jsfiddle.net/01djtnyd/
note: I changed all classes to "-6" so you can see it work easily in the fiddle
add class no-padding to the divs that are wrapping the img div
in the css add this:
.no-padding {
padding: 0 !important;
margin: 0;
}
.no-padding > div {
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}

Answer 3

You can do this with css flexbox and jQuery. Here are two options to maintain the square shape of each div.
Option 1:
HTML:
<section id="gallery">
<div class="container-fluid">
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Jquery:
$(document).ready(function(){
var grid_w = $(".grid-block").width();
$(".grid-block").height(grid_w);
});
Fiddle: https://jsfiddle.net/puxLmy1y/2/
Option 2 (without jQuery):
HTML: Same as above
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
width: 50vh;
height: 50vh;
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Fiddle: https://jsfiddle.net/puxLmy1y/3/