Bootstrap 4 Square Grid

Square columns in bootstrap

You can use this trick: https://mademyday.de/height-equals-width-with-pure-css/

Here is a working fiddle: https://jsfiddle.net/65mhv1cp/

basically, you can add a class to your squares, call it square

<div class="row">
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
</div>

The CSS would be:

.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

Read more in the link to understand how/why this works.

Bootstrap 4 square grid

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>

Bootstrap Grid - Square Tiles with same horizontal/vertical gap

You didn't mention specific box dimensions, only that they should remain square. In that case, use margin-top:30px to corresponding with the Bootstrap gutter width, and padding-bottom: 100%; on the box.

.box {
   background: #fff;
   border-radius: 4px;
   padding-bottom: 100%;
}

.col-lg-2, .col-md-3, .col-xs-6{
    margin-top: 30px !important;
}

Bootstrap 3 demo

Bootstrap 4 demo

Note: Setting a px size on the .box (ie:width:180px;height:180px) will prevent the boxes from resizing responsively.

---

You can increase the gutter by changing margins and padding. Margin is double the padding for example...

.col-lg-2, .col-md-3, .col-xs-6{
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 60px;
}

Grid of responsive squares

New solution (2022)

CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid :

• The grid property to handle the grid layout (MDN reference)
• The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference)
• The object-fit property to handle image centering and wether they should cover the square or not (MDN reference)

Here is an example :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 5%;
  background-color: #1E1E1E;
  color: #fff;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

<div class="grid">
  <div class="square">
    <ul>This demo shows you can center multiple types of content :
      <li>Text</li>
      <li>Images</li>
      <li>Lists</li>
      <li>... (you can also do it with forms)</li>
    </ul>
  </div>
  <div class="square">98%</div>
  <div class="square">3.9/5</div>
  <div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
  <div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>

Square responsive divs using Bootstrap 4

eventually, a pseudo element could help :

.col-sm-4:before,.col-sm-8:before {  content: '';  width: 0;}
.col-sm-4:before,.col-sm-8:before,.ib {  white-space: normal;  display: inline-block;  vertical-align: middle;  max-width: 100%;}
.col-sm-4:before {  padding-top: 100%;  /* makes expand to a square */}
.col-sm-8:before {  padding-top: 50%;  /* makes a rectangle half the height of a square */}
[class^="col"] {  white-space: nowrap;  box-sizing: border-box;  box-shadow: inset 0 0 0 5px white;  padding: 0;  text-align: center;  background: url(http://lorempixel.com/400/200) tomato;  background-size: cover;}
.row {  color: white;  text-shadow: 0 0 black, 0 0 2px black;}
.col-sm-4 {  background: gray;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <div class="row section-box">    <div class="col-sm-4 text-center description-text p-0">      first square box.    </div>    <div class="col-sm-8 description-image p-0">      second rectangle box.    </div>  </div>  <div class="row section-box">    <div class="col-sm-8 description-image p-0">      <div class="ib">second<br> rectangle box.</div>    </div>    <div class="col-sm-4 text-center description-text p-0">      first square box.    </div>  </div></div>

Making a square responsive grid with bootstrap and php

Something like this: the other one must be using javascript

css

.dummy {
  margin-top: 100%;
}

.row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.item-item {
  flex:0 0 277px;
  margin: 15px 0 0 1%;
  text-align: center;
  padding-top: calc(50% - 30px);
  border: solid black 5px;
}

https://jsfiddle.net/3wym5nhw/4/

Bootstrap different height squares

why not using CSS grid:

body {  display: grid;  grid-template-areas:   "a a s ."   "a a b b"   ". p b b";  grid-template-columns: repeat(4,70px);  grid-template-rows: repeat(3,70px);  grid-gap:1px;}
.big {  background: red;  color:#fff;  text-align:center;}
.small {  background: blue;  color:#fff;  text-align:center;}
.s {  grid-area: s;}
.p {  grid-area: p;}
.a {  grid-area: a;}
.b {  grid-area: b;}

<div class="big a">hey am big</div><div class="big b">hey am big</div><div class="small s">hi</div><div class="small p">hi</div>

---

Related Topics