Making a square responsive grid with bootstrap and php

Question

I'm trying to make a square grid with Bootstrap and PHP for my Omeka theme. I have been trying to make a tile-like grid, with either 3 or 4 items in an even row like in this example. However, when I tried this in my own code it just defaults to a single column. I've tried a number of class variations and nothing seems to work.

Here's the HTML:

    <div class="container">
      <div class="item">
        <div class="row">
      <!-- attempt at square grid -->
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end grid -->

and the CSS:

.dummy {
margin-top: 100%;
}

.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align: center;
padding-top: calc(50% - 30px);
}

.item-item {
border: solid black 5px;
}

Here's the JS Fiddle. How can I make this into a grid with even columns and rows?

I added bootstrap to your fiddle and its working now, check here. https://jsfiddle.net/errhunter/3wym5nhw/5/ — Gaurav Gandhi, Jan 20 '16 at 07:31

score 0 · Accepted Answer · answered Jan 20 '16 at 05:52

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/

score 0 · Answer 2 · answered Jan 20 '16 at 06:13

<div class="container">
  <div class="item">

    <div class="row">
      <!-- attempt at square grid -->
      <div class="col-md-6 col-sm-6 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
    </div>  
    <div class="row">  
      <div class="col-md-6 col-sm-6 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 item-item">
        <div class="dummy"></div>
        <div class="thumbnail purple">
          Title:
          <br> Description
          <br> Another category
          <br>
        </div>
      </div>
    </div>


  </div>
</div>
<!-- end grid -->

use two rows to make a 2X2 grid

Making a square responsive grid with bootstrap and php

2 Answers2