How To Make Grid Items Height Equal

Bootstrap Studio Help
1

Hi I would like you to help me get this right.

2

That's not going to happen without using CSS flexbox which is included in the Bootstrap 4 release, well happen easily anyways. When the BSS Devs release Bootstrap Studio 4 then you will be able to work with CSS flexbox.

Without CSS flexbox you would need to write Javascript that can calculate the heights of a collection of compared elements, determine which is the taller and then set the rest of the elements to match it.

For CSS flexbox you can use the following CSS to get you started.

.flexbox {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.red {
    background-color:red;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}

The colors are just so you can use the code to see it in action easily.

Here is the HTML to work with it.

<div class="row flexbox">
    <div class="col-md-4 red">
        <h1>Heading</h1>
    </div>
    <div class="col-md-4 blue">
        <h2>Heading</h2>
        <p>Paragraph</p>
    </div>
    <div class="col-md-4 green">
        <h3>Heading</h3>
    </div>
</div>

Using that example you will see that all 3 columns are the same height regardless of their respective content.

Here is a site to help you understand CSS flexbox better https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this helps you out :)

Saj