0

I've had an issue for the past few weeks on the site im working on. I have a Bootstrap grid with three containers per row, and containing 3 rows in the whole grid. 2 out of 9 of the containers are shorter than the others.

Things I've Tried:

  1. Creating images that are all the same height
  2. Forcing same height in css

So far these didn't work... The issue can be seen here: https://pawalter.psu.edu/topics or here: Bootstrap grid navigation

The code for the node (drupal 7 site) containing the Bootstrap grid is this:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/agriculture">
          <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Ag.jpg" alt="Agriculture" >
          <div class="caption">
            <h4>Agriculture</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/bluffmanagement">
          <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Bluff-mgmt.jpg" alt="Bluff Management" >
          <div class="caption">
            <h4>Bluff Management</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="http://pawalter.psu.edu/topics/invasivespecies">
         <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Invasives.jpg" alt="Invasive Species" >
          <div class="caption">
            <h4>Invasive Species</h4>
          </div>
        </a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/policyandgovernance">
         <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Policy.jpg" alt="Policy" >
          <div class="caption">
            <h4>Policy &amp Goverance</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/presqueislebay">
           <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/PIB.jpg" alt="Presque Isle Bay" >
          <div class="caption">
            <h4>Presque Isle Bay</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/reservationandconservation">
          <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Rest-and-Cons.jpg" alt="Restoration & Conservation" style="">
          <div class="caption">
            <h4>Restoration &amp Conservation</h4>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/stormwatermanagement">
           <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Stormwater.jpg" alt="Stormwater Management" >
          <div class="caption">
            <h4>Stormwater Management</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/water-and-land">
           <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Water-and-LU.jpg" alt="Water and Land Use Planning" >
          <div class="caption">
            <h4>Water and Land Use Planning</h4>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="https://pawalter.psu.edu/topics/water-quality">
          <img src="<?php $theme_path = drupal_get_path('theme', variable_get('theme_default',NULL));
          print $theme_path;
          ?>/images/Water-Quality.jpg" alt="Water Quality" >
          <div class="caption">
            <h4>Water Quality</h4>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
leymannx
  • 5,138
  • 5
  • 45
  • 48
kjh5467
  • 3
  • 4
  • The images must be the same size, not just height. Otherwise the image ratio is different, and the columns will be different heights. Another approach is to [use background images](https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of-different-height-and-width-the-same-via-css) – Carol Skelly Mar 26 '18 at 02:16
  • 1
    I ended up finding the images weren't exactly the same size. Those two images were off by 20 pixels... I ended up resizing. Next time if they are all relatively close in size, I will use the one you suggested @ZimSystem ! – kjh5467 Mar 26 '18 at 02:26
  • Possible duplicate of [Same height column bootstrap 3 row responsive](https://stackoverflow.com/questions/23287206/same-height-column-bootstrap-3-row-responsive) – leymannx Mar 27 '18 at 11:10
  • There are a lot answers out there already fixing your exact problem. I'd recommend using `display: flex;` here. – leymannx Mar 27 '18 at 11:11
  • https://stackoverflow.com/questions/47629512/twitter-bootstrap-same-height-for-grid – leymannx Mar 27 '18 at 11:12

0 Answers0