Bootstrap 4 square grid

Question

I want to create a responsive grid of squares with Bootstrap 4, to do so, I'm doing something like this (One row):

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

And I'm setting the colclass to have the following rule:

.col {
    padding-top: 100%;
}

But that only creates a row with each column of the height of the viewport.

This solution used to work before, but I think it breaks the Bootstrap 4 flexbox.

Any ideas?

Answer 1

padding-bottom: 100%

...applies a padding value equal to the parent's width. The parent width is .rows width. If you have 5 elements, you need to apply padding-bottom: 20%. If they're 4, you need padding-bottom: 25%, etc...

And, remember, if you want your columns to wrap responsively, you'll need to adjust you padding-bottom values for each case.

A much easier way of doing it is to place your square items inside the cols. This way they will always be squares relative to current column width:

.square {
  padding-bottom: 100%;
}
.orange {background-color: orange;}
.orangered {background-color: orangered;}
.gold {background-color: gold;}
.darkorange {background-color: darkorange;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row no-gutters">
        <div class="col"><div class="square orange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
        <div class="col"><div class="square gold"></div></div>
        <div class="col"><div class="square darkorange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
    </div>
</div>

Now you safely add responsiveness classes to your columns, the squares will remain squares, relative to current column width.

---

• Note I also added no-gutters class to row to remove the col left/right padding values.
• Change container to container-fluid if you want the container to have full page width.

---

Bonus: how to place content into a pre-sized component:
The above solution leaves you with the next problem: the square is sized solely on the padding value. If you add any flow content to it, it will become bigger. The solution is to place the contents outside of document flow, like this:

.square {
  padding-bottom: 100%;
  position: relative;
  height: 0;
}

.square>div {
  position: absolute;
  height: 100%;
  overflow-y: auto;
  padding: 1rem;
}

.orange {
  background-color: orange;
}

.orangered {
  background-color: orangered;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row no-gutters">
    <div class="col">
      <div class="square orange">
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam at. Ultricies tristique nulla aliquet enim tortor at. In egestas erat imperdiet sed euismod. Placerat orci nulla pellentesque dignissim enim sit. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Felis eget nunc lobortis mattis aliquam faucibus. Aliquet porttitor lacus luctus accumsan. Amet risus nullam eget felis eget nunc lobortis mattis. Tortor consequat id porta nibh venenatis cras sed.
          <p>Suspendisse sed nisi lacus sed viverra tellus in. Tellus cras adipiscing enim eu. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus orci ac auctor augue mauris augue neque gravida in. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Et pharetra pharetra massa massa ultricies. Facilisis sed odio morbi quis. Felis eget velit aliquet sagittis id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Facilisis leo vel fringilla est. Quam adipiscing vitae proin sagittis. Mi tempus imperdiet nulla malesuada. Eget arcu dictum varius duis. In eu mi bibendum neque egestas congue quisque egestas. Ut tristique et egestas quis ipsum suspendisse ultrices. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Aliquam faucibus purus in massa tempor nec. Amet luctus venenatis lectus magna fringilla.
          <p>Est ullamcorper eget nulla facilisi etiam dignissim. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Pellentesque elit eget gravida cum sociis. Aliquam faucibus purus in massa tempor nec. Nisl vel pretium lectus quam id leo in vitae. Non consectetur a erat nam at lectus urna. Porttitor massa id neque aliquam vestibulum morbi. Non sodales neque sodales ut etiam sit amet nisl purus. Leo vel orci porta non pulvinar neque laoreet. Nisl nunc mi ipsum faucibus. Non consectetur a erat nam at lectus. Ac turpis egestas sed tempus urna et pharetra pharetra. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ipsum faucibus vitae aliquet nec ullamcorper sit. Egestas congue quisque egestas diam in. Sagittis eu volutpat odio facilisis mauris sit. Dui vivamus arcu felis bibendum ut tristique.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="square orangered">
        <div>
          <p>Tristique senectus et netus et malesuada fames. Semper feugiat nibh sed pulvinar proin gravida. Risus in hendrerit gravida rutrum quisque non. Elit ut aliquam purus sit amet luctus. Porttitor eget dolor morbi non arcu risus quis varius quam. Aliquam eleifend mi in nulla posuere. Venenatis tellus in metus vulputate. Lacinia at quis risus sed vulputate odio. Nisl nisi scelerisque eu ultrices. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Id cursus metus aliquam eleifend mi. Ac feugiat sed lectus vestibulum. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Bibendum neque egestas congue quisque egestas diam in arcu. Mauris in aliquam sem fringilla. Praesent tristique magna sit amet purus gravida quis blandit.
          <p>Felis eget nunc lobortis mattis aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam quis enim lobortis scelerisque fermentum dui. At ultrices mi tempus imperdiet nulla malesuada. Amet volutpat consequat mauris nunc congue. Sit amet mattis vulputate enim nulla aliquet. Diam ut venenatis tellus in metus vulputate eu scelerisque. Quam elementum pulvinar etiam non quam. Id interdum velit laoreet id donec ultrices. Sit amet est placerat in egestas erat imperdiet sed. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Tristique senectus et netus et. Quis viverra nibh cras pulvinar mattis nunc. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Sed odio morbi quis commodo. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Sagittis vitae et leo duis ut diam quam nulla porttitor.
        </div>
      </div>
    </div>
  </div>
</div>

Note you should only have one immediate div child (content wrapper) in each .square for this to work.

Answer 2

Can you try using class="w-100"

Example Given on Bootstrap Official Website

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>