Problem of various height of elements on line solved!

single-image

This article introduces you to the jQuery library used to align column sizes in rows. See how simple and effective it is!

Everyone who created pages in tools like Bootstrap encountered the problem of different element heights, although in theory they should be the same. A common example can be a product title element in an online store – where one product is called “Pendrive 32GB”, where at this time there is “Laptop 2 in 1 ACER Switch Alpha 12 SA5-271-37SL” in a row.

The effect is dispersed content, as in the above snippet

<div class="container my-5" >
    <div class="row">
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

The situation is getting worse when we want to have several lines. Then the columns just mix in an unpredictable way and the site looks very inaccessible.

Use Popular jQuery library

On the Github portal, we can find a great library that will easily let us get rid of the problem once and for all.

Go to GitHub

We have several ways to install the library – through the package installer or by manually downloading the archive. In both cases, we should attach our script to the jQuery library in HTML.

Basic use of the library comes down to choosing the CSS class and using the appropriate function.

By rewriting the example in advance after installing the library and adding a simple piece of Javascript we get the following snippet:

$(function() {
	$('.card-text').matchHeight();
});

And that’s it!

From now on, the elements will have the same height. The library is very small and optimized for use before “firing” a DocumentReady event.


Please leave me comment if you have any question. If you liked this post, go to my instagram and follow me to stay up to date!

You may like