Bootstrap Grid - Square Tiles with same horizontal/vertical gap - html

Question

I'm trying to create a Grid of Tiles with Bootstrap with the following properties:
all tiles should be squares
horizontal and vertical gaps should be the same (even the same compared on different screen-widths)
the tiles should always be centered in the middle of the screen(distance from the left edge of website to the left border of the leftmost tile = distance from the right edge of the website to the right border of the righmost tile)
It should look like this:
body{
background: #a5b5c5;
background:lightblue !important;
}
.box{
height: 180px;
width: 180px;
background: #fff;
border-radius: 4px;
}
.col-lg-2, .col-md-3, .col-xs-6{
margin-top: 12px !important;
}
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
</div>
</div>
What should I do to accomplish a responsiveness which sustains my properties?
Thanks!!

Answer 1

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;
}

Answer 2

try below code
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
</div>
</div>
body{
background: lightblue;
}
.container{
margin-top: 20px;
}
.box{
height: 100px;
background: #fff;
border-radius: 5px;
margin-bottom: 10px;
max-width: 100px;
}