0

What is the best way of ensuring that the elements on left perfectly line up with the box on the right (on a desktop)? Right now there seems to be a gap at the bottom. Can't seem to figure it out...

jsfiddle here: https://jsfiddle.net/kqf6vubr/1/

<div class="row" style="margin-bottom: 5em;">
  <div class="col-sm-5 col-md-5" style="height: 300px">
    <div class="row">
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
      <div class="col-sm-4 col-md-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/275x275" class="img-responsive">
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-7 col-md-7 panel-body" style="background-color: #ccc; padding: 2em">
    <h3 style="margin-top: 0px; margin-bottom: 1em">Brand Name</h3>
    <div class="row">
      <div class="col-sm-6 col-md-6">
        <div class="fluid-media">
          <iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-sm-6 col-md-6">
        Description text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie libero quis hendrerit blandit.
      </div>
    </div>
    <div class="row" style="margin-top: 1em; margin-left: 1px">
      { Watch Time } | { Views } | { Rating }
    </div>
  </div>
</div>
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
methuselah
  • 12,766
  • 47
  • 165
  • 315
  • 1
    I think you would need to use bootstrap 4 if you wanted the first column to be the height of the second column – Pete Jan 10 '18 at 16:20
  • Is it not possible with custom css on bootstrap 3? – methuselah Jan 10 '18 at 16:20
  • Bootstrap 3 doesn't support dynamic heights very well. Bootstrap 4 uses flexbox which can solve this issue – Phiter Jan 10 '18 at 16:21
  • Don't think so as it floats the cols but I may be wrong - never really used it – Pete Jan 10 '18 at 16:21
  • Related - https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height/22892773#22892773 – Paulie_D Jan 10 '18 at 16:29

0 Answers0