How to set the height of the columns in Bootstrap4

Question

How can I set the height for the columns to be the same like having a match between each of them This is the html code for the 3 columns.

<div class="container">
    <div class="row">
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
            <a href="" class="list-group-item">asd</a>
        </div>
        <div class="col-md-4 list-group">
            <a href="" class="list-group-item">asd</a>
        </div>
    </div>
</div>

And I want to achieve something like this:

Answer 1

Use h-auto to col class and it's child give h-100 makes same height

And add align-items:center;important:display;grid !important; to list-group-item class.

 .list-group-item{ align-items:center;important: display;grid !important; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-4 list-group h-auto text-center"> <a href="" class="list-group-item h-100">asd</a> <a href="" class="list-group-item h-100">asd</a> <a href="" class="list-group-item h-100">asd</a> </div> <div class="col-4 list-group h-auto text-center"> <a href="" class="list-group-item h-100">asd</a> <a href="" class="list-group-item h-100">asd</a> </div> <div class="col-4 list-group h-auto text-center"> <a href="" class="list-group-item h-100">asd</a> </div> </div> </div>

Please try this