How can I align Bootstrap Columns vertically so that they are the same height?

Question

I am trying to create a website with several images and content in columns using Bootstrap as a framework.

Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is 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 the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.

How can I make them adjust to the height of the row so that all of the content is in line?

Thanks.

Use flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — linktoahref, Mar 01 '17 at 09:12
Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Troyer, Mar 01 '17 at 09:12

score 0 · Answer 1 · answered Mar 01 '17 at 09:20

You may use css flexbox to achieve same height for all the columns. So your code would be:

<div class="row heightadjust">
    <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>

and write a custom css

.heightadjust {
    display: flex;
}

How can I align Bootstrap Columns vertically so that they are the same height?

1 Answers1