How can I make Bootstrap columns all the same height with gap? - html

Question

I'm using Bootstrap. How can I make three columns all the same height including the gap?
Here is the screenshot;
Screenshot
Here is the code;
<div class="container">
<div class="row mt-4">
<div class="col-12 col-md-6 col-xl-4 service mt-4">
<div class="p-3">
<div class="icon">
<i class="fa-solid fa-laptop-code fs-1"></i>
</div>
<h5 class="mb-4 mt-2">Web Development</h5>
<p>I provide full Web Development according to your needs.</p>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4 service mt-4">
<div class="p-3">
<div class="icon">
<i class="fa-solid fa-palette fs-1"></i>
</div>
<h5 class="mb-4 mt-2">Web Design</h5>
<p>I will do the best and most Modern Web App Designs for your website.</p>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4 service mt-4">
<div class="p-3">
<div class="icon">
<i class="fa-solid fa-mobile-screen-button fs-1"></i>
</div>
<h5 class="mb-4 mt-2">Responsive Design</h5>
<p>Fully Responsive Design using Bootstrap or Media Queries.</p>
</div>
</div>
</div>
</div>
Here is some CSS;
.p-3{
text-align: center;
background: #202020;
border-radius: 10px;
}

Answer 1

Adding height: 100% to class p-3 will solve the problem.
Edit the CSS like the following;
.p-3{
height: 100%; //add this to the CSS code
text-align: center;
background: #202020;
border-radius: 10px;
}

Answer 2

html
<div id="myContainer" class="col-md-12">
<div class="col-md-4" id="myItem">
<div id= "myCard">
this is my item
</div>
</div>
<div class="col-md-4" id="myItem">
<div id= "myCard">
this is my item
</div>
</div>
<div class="col-md-4" id="myItem">
<div id= "myCard">
this is my item
</div>
</div>
</div>
css
#myContainer{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-content: center;
}
#myItem{
display:flex;
align-items: center;
justify-content: center;
}
#myCard{
height:100px;
width:200px;
background-color: blue;
height:300px;
width:95%;
}

Answer 3

Try this
.row>div {
display: grid;
}