How can I make my columns equal height in Bootstrap?

Question

I went through similar questions here but I could not get my columns height equal. I also checked similar questions in google.

And I also tried these solutions that cna be found here: How can I make Bootstrap columns all the same height?

I am using Bootstrap 4. Why are the columns height not equal here?

Here is the code.

#testimonial-1-block {
    padding-top: 35px;
    padding-bottom: 35px;
}

.testimonial-container {
    background-color: #dff1f4;
    padding: 20px;
    border-radius: 4px;
    position: relative;
}

.testimonial-container .testimonial-img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 20px;
}

.testimonial-container .testimonial-name {
    padding-top: 20px;
}

.testimonial-container .testimonial-name h4 {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.testimonial-position {
    font-style: italic;
    font-size: 13px;
    color: rgba(0,0,0, .5);
}

.testimonial-stars i {
    color: #f8a23c;
    font-size: 15px;
}

.testimonial-text p {
    text-align: center;
    padding-top: 15px;
}

.testimonial-quote {
    content: '';
    position: absolute;
    top: 10px;
    left: 25px;
    font-size: 40px;
    color: #ffffff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="testimonial-1-block">

        <div class="container">
            <div class="row">
                <div class="col-sm-4">

                    <div class="testimonial-container">

                        <div class="testimonial-img d-flex justify-content-center">
                            <img src="https://avratuts.com/wp-content/uploads/2020/05/testimonial-1.png" class="img-fluid" alt="">
                        </div>
                        <div class="testimonial-name d-flex justify-content-center">
                            <h4>Johanna Kirby</h4>
                        </div>
                        <div class="testimonial-position d-flex justify-content-center">
                             <p>Digital Marketer</p>
                        </div>
                        <div class="testimonial-stars d-flex justify-content-center">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="testimonial-text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod </p>
                        </div>
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                        </div>

                    </div>

                </div>

                <div class="col-sm-4">

                    <div class="testimonial-container">

                        <div class="testimonial-img d-flex justify-content-center">
                            <img src="https://avratuts.com/wp-content/uploads/2020/05/testimonial-1.png" class="img-fluid" alt="">
                        </div>
                        <div class="testimonial-name d-flex justify-content-center">
                            <h4>Johanna Kirby</h4>
                        </div>
                        <div class="testimonial-position d-flex justify-content-center">
                             <p>Digital Marketer</p>
                        </div>
                        <div class="testimonial-stars d-flex justify-content-center">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="testimonial-text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint.</p>
                        </div>
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                        </div>

                    </div>

                </div>

                <div class="col-sm-4">

                    <div class="testimonial-container">

                        <div class="testimonial-img d-flex justify-content-center">
                            <img src="https://avratuts.com/wp-content/uploads/2020/05/testimonial-1.png" class="img-fluid" alt="">
                        </div>
                        <div class="testimonial-name d-flex justify-content-center">
                            <h4>Johanna Kirby</h4>
                        </div>
                        <div class="testimonial-stars d-flex justify-content-center">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="testimonial-text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium! Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint.</p>
                        </div>
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                        </div>

                    </div>
            </div>
        </div>

</section>

Any help is appreciated! Thank you!

You could just declare height for .testimonial-container to 100% so it will always be the full height of the parent element. Since these divs are contained within
, just set the height of
to 100%! — MicroDev92, May 15 '20 at 12:49

score 0 · Answer 1 · answered May 15 '20 at 12:45

0

Just add the class align-items-stretch to all the columns you want to have the same height inside a row.

bootstrap 4.0 documentation

answered May 15 '20 at 12:45

David

155
6

score 0 · Answer 2 · answered May 15 '20 at 15:54

0

Just by adding height: 100% you will get your desire output.

.testimonial-container {
    background-color: #dff1f4;
    padding: 20px;
    border-radius: 4px;
    position: relative;
    height:100%; // Here to add the height.
}

answered May 15 '20 at 15:54

Abdul Moeez

1,331
2
13
31

Does this way, Help you out? – Abdul Moeez Jun 05 '20 at 11:31

How can I make my columns equal height in Bootstrap?

2 Answers2