Equal Height Blocks in Bootstrap with JavaScript

In web design, aligning elements of varying heights can be a challenge, especially when you want them to maintain a uniform appearance. One common scenario is aligning blocks with different content heights in a row. Fortunately, with Bootstrap and a bit of JavaScript, you can easily achieve this.

The Problem

Let's say you have three blocks of content side by side, but each block has a different height:\

<div class="row">
    <div class="col-md-4">
        <div class="block" style="height: 150px;">Block 1</div>
    </div>
    <div class="col-md-4">
        <div class="block" style="height: 200px;">Block 2</div>
    </div>
    <div class="col-md-4">
        <div class="block" style="height: 180px;">Block 3</div>
    </div>
</div>

The Solution

We can use JavaScript to dynamically adjust the height of each block based on the tallest block's height. Here's how you can do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Equal Height Blocks</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* Optional: Adjust some styles for better presentation */
        .block {
            background-color: lightblue;
            border: 1px solid blue;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row" id="blocksContainer">
        <div class="col-md-4">
            <div class="block" style="height: 150px;">Block 1</div>
        </div>
        <div class="col-md-4">
            <div class="block" style="height: 200px;">Block 2</div>
        </div>
        <div class="col-md-4">
            <div class="block" style="height: 180px;">Block 3</div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
        // Function to adjust the height of blocks
        function adjustBlockHeight() {
            var maxHeight = 0;
            // Loop through each block to find the maximum height
            $('.block').each(function(){
                var blockHeight = $(this).height();
                if (blockHeight > maxHeight) {
                    maxHeight = blockHeight;
                }
            });
            // Set the maximum height to all blocks
            $('.block').height(maxHeight);
        }

        // Call the function initially and whenever the window is resized
        adjustBlockHeight();
        $(window).resize(adjustBlockHeight);
    });
</script>

</body>
</html>

How It Works

1. We start by defining our blocks with different heights.
2. JavaScript function adjustBlockHeight() calculates the maximum height among all blocks.
3. This maximum height is then applied to all blocks, ensuring they have the same height.

With this approach, no matter how much the content inside each block varies, they will always align perfectly.

Conclusion

Equalizing the height of blocks in Bootstrap with JavaScript is a powerful technique for creating visually appealing layouts. It ensures that your content remains organized and maintains a consistent appearance across different screen sizes. So next time you're facing the challenge of aligning different height elements, remember this simple yet effective solution.