html – How do you force the text to not push button down when it overflows 2nd line?-ThrowExceptions

Exception or error:

I have a text in bootstrap card and there’s a button under it. Everytime I resize the page the balance between the one card with less text and the other one with more text is broken. Basically the button on card 2 is pushed down more because there’s more lines of text than in the card 3 and the buttons are balanced with padding.

I tried to fix this with Bootstrap’s text-justify but that only makes the text to go to the possible end and the text still overflows to another line. I have tried searching for solution but found out that there’s only a styling that allows you to make text dissapear like “Hey I’m…” when it overflows the selected amount of lines.

How can I balance the buttons to all stay inline with each other no matter the number of lines?

Here’s my code :


 <section id="avaiable">
            <div class="container-fluid shorter pt-4 pb-2 bg-white text-justify">
                <!--Benefit cards-->
                <div class="row">
                    <!--Student programs card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/student.jpg" alt="student programs" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Student programs</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">Discover more about student programs that help you get in touch with employers.</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--Student programs card-->
                    <!--Community engagement card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/community.jpg" alt="community engagement" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Community engagement</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">We engage and listen to our community, we value people who want to do their best.</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--End of community engagement card-->
                    <!--Invention & innovation card-->
                    <div class="col-md-6 col-lg-4 my-3 mx-auto">
                        <div class="card">
                            <img src="images/innovation.jpg" alt="invention and innovation" class="card-img-top border-radius rounded-top rounded-bottom">
                            <div class="card-body">
                                <h4 class="card-title font-proximanova-bold">Invention & innovation</h4>
                                <p class="card-text">
                                <h5 class="pb-3 color-grey font-proximanova-light">There are no limits to your inventions, got idea for a new project in mind? Share it right away!</h5>
                                <a href="" class="btn btn-crimson">
                                    <h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--End of invention & innovation card-->
                </div>
                <!--End of benefit cards-->
            </div>
        </section>

The final goal is to make the buttons stay in line with each other.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *