Drawing a 2x2 grid using bootstrap

Question

I'm trying to draw a 2x2 grid using bootstrap. My aim is to make a grid which looks similar to this:

with an onclick event handler on each tile. I'm having trouble setting the height of the tiles though and have something like this so far...

<div class="col-md-4">
  <div class="row">
     <div class ="col-md-2">
         one
      </div>
     <div class ="col-md-2">
        two
     </div>
  </div>
  <div class="row">
     <div class ="col-md-2">
         three
      </div>
     <div class ="col-md-2">
        four
     </div>
  </div>

Possible duplicate of [Grid of responsive squares](http://stackoverflow.com/questions/20456694/grid-of-responsive-squares) — Maverick, Jan 17 '17 at 14:25
BTW if you still can't figure it out here is your answer: http://codepen.io/rema/pen/Lxbyyp — Maverick, Jan 17 '17 at 14:28

score 2 · Answer 1 · edited Feb 19 '19 at 13:31

2

bootstrap columns should total to 12. The code:

<div>
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

edited Feb 19 '19 at 13:31

alpha_one_x86

50
8

answered Jan 17 '17 at 14:31

jmag

796
1
8
17

Drawing a 2x2 grid using bootstrap

1 Answers1