I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework.
I'm wondering if there's a way to automatically adjust all the columns to the height of the row. Here's a snippet of my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
<a href="#" title="" class="btn btn-custom">READ MORE</a>
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
<a href="#" title="" class="btn btn-custom">LEARN MORE</a>
</div>
</div>
</div>
In this example, I've noticed that the two "col-md-3 col-xs-6" columns do not match the height of the "col-md-6 col-xs-12" column.
Can anyone advise on how to make them align with the row's height so that all content appears uniformly?
Your help is greatly appreciated.