2

I want to create a grid as follows that is responsive (Ignore the sizes in the image below, they were used to demonstrate the aligned grid):

enter image description here

I have created the following bootply, but as you can see the large image does not align with the bottom of the row.

http://www.bootply.com/2p6uXgXJNT

What am I doing wrong? I have tried to use Table, Table-Row and Table-Cell but was unable to find a solution.

j08691
  • 204,283
  • 31
  • 260
  • 272
samb90
  • 1,063
  • 4
  • 17
  • 35
  • The margin top in the second image is throwing off the alignment: `
    `
     – Sherman Apr 09 '15 at 14:01
  • I need the gutter spacing between those 2 vertical images to be the same size as the gutter spacing between the columns which is 30px – samb90 Apr 09 '15 at 14:03
  • If you remove the margin-right from the bootstrap .row class, this also fixes it, but I'm not sure that is the desired solution. http://stackoverflow.com/questions/19742804/twitter-bootstrap-3-removing-right-margin-and-padding-on-a-row-and-col-12 – Sherman Apr 09 '15 at 14:14

2 Answers2

1

In order to achieve responsiveness with bootstrap you will have to add the classes for all layouts col-**-number, like col-md-12, col-sm-12, col-xs-12 etc.. You can read more about the boostrap grid sytstem and its behaviour. As it concerns the vertical alignment of the divs, its a tricky problem in general depending on the conditions of your divs. Placement, fixed height etc.. There is an excellent guide in CssTricks tackling this exact problem of equal columns you are looking for. As I stated is not trivial.

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-12">
      <img src="http://placehold.it/1280x700" class="imgFullSize">
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <img src="http://placehold.it/452x250" class="imgFullSize">
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px">
          <img src="http://placehold.it/452x250" class="imgFullSize">
        </div>
      </div>
    </div>
  </div>
</div>
topless
  • 8,069
  • 11
  • 57
  • 86
  • Thats a fair point, but the question is addressing the issue with the gap that appears at the bottom of the large image. That large image needs to fill all of the available height. – samb90 Apr 09 '15 at 14:02
  • I just noticed that I didn't read the question properly. I ll update in a minute. – topless Apr 09 '15 at 14:03
  • Let me know if you figure it out otherwise I ll work on a mini sample for you after work. – topless Apr 09 '15 at 14:08
1

The image will only fill as much space as it has available in the div proportionately unless you force the height of the image in this case.

seguraMode
  • 174
  • 1
  • 1
  • 10