Bootstrap Grid - Square Tiles With Same Horizontal/vertical Gap

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 compa

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

Solution 2:

try below code

<divclass="container"><divclass="row"><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div></div><divclass="row"><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="box"></div></div><divclass="col-xs-3 col-sm-4 col-md-2"><divclass="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;
    }