How to align content from different columns at the same height?

Question

I need to align my buttons to the same height. I already changed the height of the columns to the height amount of the longest column (493px). I just need to move the button down, so that it is at the same height of the longest column.

.col-sm-6.col-md-4.boxes {
    background-color: red;
    height: 493px;
    /* height: 100%; */
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                </div>
                <div class="panel-footer"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
        <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                    SAMPLE TEXT ........
                </div>
                <div class="panel-footer"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
       <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                    SAMPLE TEXT ........
                </div>
                <div class="panel-footer"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
    </div>
</div>

You really should post a snippet with what you have currently. — James Coyle, Apr 08 '19 at 13:52
Just realized something.. Are you using bootstrap 3 ? `.panel` has been dropped in 4 and replaced with `.card` — Jake, Apr 08 '19 at 14:13
This link helped me https://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container — CoolDog, Apr 08 '19 at 15:11

score 1 · Answer 1 · answered Apr 08 '19 at 13:55

1

May be this will work for you.

.col-sm-6.col-md-4.boxes {
    background-color: red;
    height: auto;
}

answered Apr 08 '19 at 13:55

Shoaib

314
1
4

You can add property min-height or max-height if needed. – Shoaib Apr 08 '19 at 13:56

Jake · Answer 2 · 2019-04-08T14:10:58.970

I would suggest using bootstrap built-in classes. No need to set absolute pixel values. With the following classes the column will automatically adjust to the taller one.

Give <figure> elements these classes :

h-100 to set their height to 100%.
d-flex to set them to display: flex
flex-column to set them to flex-direction: column.

Then give panel-body the class flex-grow-1 so that it fills all the available space and pushes the footer/button down.

Then, for better style, give a margin-bottom (such as mb-3) to .panel-footer

.col-sm-6.col-md-4.boxes {
    background-color: red;
    height: 493px; /* kept for height */
    /* height: 100%; */
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default h-100 d-flex flex-column">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body flex-grow-1">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                </div>
                <div class="panel-footer mb-3"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
        <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default h-100 d-flex flex-column">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body flex-grow-1">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                    SAMPLE TEXT ........
                </div>
                <div class="panel-footer mb-3"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
       <div class="col-sm-6 col-md-4 boxes">
            <figure class="panel panel-default h-100 d-flex flex-column">
                <div class="panel-heading">
                    <img src="img/image.jpg" class="img-responsive">
                </div>
                <div class="panel-body flex-grow-1">
                    <h3 class="panel-title">TITLE sample</h3>
                    SAMPLE TEXT .........
                    SAMPLE TEXT ........
                </div>
                <div class="panel-footer mb-3"><a href="sample.aspx" class="btn btn-primary btn-block">BUTTON SAMPLE</a></div>
            </figure>
        </div>
    </div>
</div>

See a full example on this JSFiddle

How to align content from different columns at the same height?

2 Answers2