Two rows two columns fluid page layout bootstrap

Question

I have a page which has a button. When that button is clicked I want the page to scroll down to another page which contains 4 squares (two rows and two columns) similar to this page after clicking on explorer. I tried to do the 4 square thing with bootstrap using something like this:

<section id="my_section">
  <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-sm-6">Top left image</div>
            <div class="col-lg-6 col-sm-6">Top right image</div>
        </div><!-- End of first row -->
        <div class="row">
            <div class="col-lg-6 col-sm-6">Bottom left image</div>
            <div class="col-lg-6 col-sm-6">Bottom right image</div>
        </div><!-- End of second row -->
 </div><!-- End of container -->
</section>

But for some reason, my 4 images do not properly take the whole content of the viewport (in other words, the two images at the bottom are not shown completely, I have to scroll down to see the rest of the content).

How do I make it so that my four images appear fully within the viewport of my browswer?

Thanks in advance

Answer 1

The layout itself is easy to obtain. The question here is how do you want your images on different screen sizes and layouts? Would you like them cropped...

#my_section .row>[class^=col-] {
  height: 50vh;
}
#my_section .row>[class^=col-] {
  background: transparent center center no-repeat;
  background-size: cover;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
  <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
        </div><!-- End of first row -->
        <div class="row">
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
        </div><!-- End of second row -->
 </div><!-- End of container -->
</section>

...or contained?

#my_section .row>[class^=col-] {
  height: 50vh;
}
#my_section .row>[class^=col-] {
  background: transparent center center no-repeat;
  background-size: contain;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
  <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
        </div><!-- End of first row -->
        <div class="row">
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
            <div class="col-sm-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
        </div><!-- End of second row -->
 </div><!-- End of container -->
</section>

If you want to keep them side by side on all screen sizes, you need to replace col-sm-6s with col-xs-6s:

#my_section .row>[class^=col-] {
  height: 50vh;
}
#my_section .row>[class^=col-] {
  background: transparent center center no-repeat;
  background-size: cover;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
  <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
            <div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
        </div><!-- End of first row -->
        <div class="row">
            <div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
            <div class="col-xs-6" style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
        </div><!-- End of second row -->
 </div><!-- End of container -->
</section>

The site you linked seems to use the cropped responsive version (1st one), with a small twist, to make the zoom effect. I added it as well, using only CSS and a minor change in markup:

#my_section .row>[class^=col-] {
  height: 50vh;
  overflow: hidden;
  position: relative;
  min-height: 400px;
  background-color: #000;
}
#my_section .row>[class^=col-]>div {
  background: transparent center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.01);
          transform: translate3d(-50%, -50%, 0) scale(1.01);
  -webkit-transition: opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
  transition: opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
  transition: transform 2.1s ease-out, opacity .42s cubic-bezier(.55,0,.55,.22);
  transition: transform 2.1s ease-out, opacity .42s cubic-bezier(.55,0,.55,.22), -webkit-transform 2.1s ease-out;
}
#my_section .row>[class^=col-]>div:hover {
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.21);
          transform: translate3d(-50%, -50%, 0) scale(1.21);
  opacity: .444;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<section id="my_section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div style="background-image: url(http://dummyimage.com/800x2:1/f00/fff)"></div>
      </div>
      <div class="col-sm-6">
        <div style="background-image: url(http://dummyimage.com/800x2:3/444/999)"></div>
      </div>
    </div><!-- End of first row -->
    <div class="row">
      <div class="col-sm-6">
        <div style="background-image: url(http://dummyimage.com/800x1:1/ccc/f00)"></div>
      </div>
      <div class="col-sm-6">
        <div style="background-image: url(http://dummyimage.com/800x1:2/999/369)"></div>
      </div>
    </div><!-- End of second row -->
 </div><!-- End of container -->
</section>

---

As a side note, there isn't much need for Twitter Bootstrap classes in this layout. You can limit yourself to .row and have 4 direct children (or as many pairs as you'd like, just like the site you linked) using

• {flex: 0 0 50%;} on children and
• {flex-wrap: wrap;} on .row.

Of course you'd need some prefixes and some @media queries for browser support and responsiveness, but still manageable.

Don't be afraid to use flexbox. Today it has higher global support than box-shadow, yet people are reluctant to use it as it's not "fully supported".

From my point of view, the only flexbox feature that doesn't degrade nicely and would require JavaScript to reproduce in legacy browsers is order. Not a flexbox property in its own right, but commonly associated.
But we're talking reordering. Could not be done without js before.

Even Bootstrap is implementing flexbox in v4. Optional, but available.