5

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:

enter image description here

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!!

Arnab
  • 4,216
  • 2
  • 28
  • 50
RoyalRagger
  • 73
  • 1
  • 5

2 Answers2

4

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;
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • If I wanted to edit the size of the gaps, I could change the margin of the columns, but this doesn't solve the Problem completely. How can I control the horizontal size of the gap? Is that even possible? – RoyalRagger Apr 06 '18 at 14:36
  • Yes, the margin-top would be double the padding left/right. By default, the padding is 15px, so the margin-top is 30px. But you can change that as needed. I updated the answer. – Carol Skelly Apr 06 '18 at 14:46
0

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;
    }
DPS
  • 943
  • 11
  • 22