Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

Question

Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

Here is the HTML structure that needs adjustment:

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some title</div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4" >
            <div class="title">Some very very long title</div>
            <ul>
                <li>test 1</li>
                <li>test 2</li>
            </ul>
        </div>
    </div>
</div>

The challenge here is to make the div.title blocks equal in height. How can this be achieved?

html css bootstrap-4 flexbox

Answer 1

Answer №1

To effectively structure the content, utilizing a table would be most beneficial as it has the ability to align multiple columns automatically. The HTML structure provided does not allow Bootstrap to have identical heights for multiple titles within the same level.

Additionally, there seems to be an issue with closing div tags redundantly. For a corrected version, you can refer to this example. Closing the title divs twice like this:

            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>

It is essential to close a tag only once to avoid potential issues in various browsers due to the current coding structure.

Answer 2

To effectively structure the content, utilizing a table would be most beneficial as it has the ability to align multiple columns automatically. The HTML structure provided does not allow Bootstrap to have identical heights for multiple titles within the same level.

Additionally, there seems to be an issue with closing div tags redundantly. For a corrected version, you can refer to this example. Closing the title divs twice like this:

            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>

It is essential to close a tag only once to avoid potential issues in various browsers due to the current coding structure.

Answer 3

Answer №2

Feel free to utilize the following code snippet:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .box {
            background-color: #dddddd;
            padding: 20px;
        }
        .box h1 {
            font-size: 20px;
            font-weight: any;
        }
        .box ul {
            margin: 0;
            padding: 0;
        }
        .box ul li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .box ul.bottom {
            padding-bottom: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Some title</h1>
                    <ul class="bottom">
                        <li>test a</li>
                        <li>test b</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Yet another title</h1>
                    <ul>
                        <li>trial x</li>
                        <li>example y</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="header">A longer title is here</h1>
                    <ul>
                        <li>try alpha</li>
                        <li>sample beta</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 4

Feel free to utilize the following code snippet:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .box {
            background-color: #dddddd;
            padding: 20px;
        }
        .box h1 {
            font-size: 20px;
            font-weight: any;
        }
        .box ul {
            margin: 0;
            padding: 0;
        }
        .box ul li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .box ul.bottom {
            padding-bottom: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Some title</h1>
                    <ul class="bottom">
                        <li>test a</li>
                        <li>test b</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="title">Yet another title</h1>
                    <ul>
                        <li>trial x</li>
                        <li>example y</li>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-md-4 col-sm-12">
                <div class="box">
                    <h1 class="header">A longer title is here</h1>
                    <ul>
                        <li>try alpha</li>
                        <li>sample beta</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

Answer №1

Answer №2

Similar questions

The blinking cursor in Google Docs is known as "kix-cursor-caret."

Placing an image in context with the background image

I prefer to have the boxes lined up horizontally, but they seem to be arranged vertically

Ways to even out the base of a tilted vessel?

A plethora of options for popup modals in jQuery, including stacked modals and various alternative modal

Having issues with the CSS dropdown menu not activating when hovering

Tips for Selenium: Automatically Save PDFs from Webpages without a Download Button

Modify the color of the div element after an ajax function is executed

Although PhoneGap resolution remains consistent, the outcomes may vary

How can I display a specific element from a child Component when the main Component is clicked on in React?

Can the value of a CSS class be obtained even if it is not being used?

Endless looping of numerous consecutive animations

Unable to generate webpage source code

I am encountering a recurring issue with my code where it keeps showing a 'not defined

Eliminating the border of a table that is contained within a cell

Is using .htaccess a reliable method for securing a specific file on the server?

Transferring the input value to a different input field with Keyup in Angular 9

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

Dynamically pass specific outputs from multiple SQL queries to a form

What could be causing the lack of color change in my boxes even after confirming the prompt?