Click to Watch Video
1. How to Create Bootstrap 4 Cards with Same Height regardless of Content
Bootstrap 4: Today I found out that using Cards without wrapping them in Container-Fluid will expand their heights. This problem can be resolved by first creating a div with a class of container-fluid then creating another div with a class of card. This way the height of a card is constrained in a container and it will respect other elements in the same container.
2. How to Center/Position a Div Element in the Middle of another Div in Bootstrap 4
[NB] If you want align a div in the middle of a row or another div, add class="align-self-center" to the outer div containing the content you want to display in the middle of the div or a row. See the code below:
+1 888-688-2939 
<div class="row border">
<!--You want to align the image in the middle of the div-->
<div class="col-12 align-self-center">
<img class="img-fluid" src=".." />
</div>
</div>3. Hiding a Div in Bootstrap 5 is easy, you can utilize the d-none d-lg-block to show the div on large screens.
4. The other way to achieve same height of a card is by giving a card height, for example, card h-100, bootstrap has a utility class of h-100.
1. How to Create Bootstrap 4 Cards with Same Height regardless of Content
Bootstrap 4
Today I found out that using Cards without wrapping them in Container-Fluid will expand their heights. This problem can be resolved by first creating a div with a class of container-fluid then creating another div with a class of card. This way the height of a card is constrained in a container and it will respect other elements in the same container.
2. How to Center/Position a Div Element in the Middle of another Div in Bootstrap 4
[NB] If you want align a div in the middle of a row or another div, add class="align-self-center" to the outer div containing the content you want to display in the middle of the div or a row. See the code below
<div class="row border">
<!--You want to align the image in the middle of the div-->
<div class="col-12 align-self-center">
<img class="img-fluid" src=".." />
</div>
</div>3. Hiding a Div in Bootstrap 5 is easy, you can utilize the d-none d-lg-block to show the div on large screens.
4. The other way to achieve same height of a card is by giving a card height, for example, card h-100, bootstrap has a utility class of h-100.
I had a similar experience when I needed to hide elements on small screen and show them on a large screen. In bootstrap seemed to be a little bit tricky, I resolved it by adding "d-none d-lg-block" and for the small screen "d-none d-sm-block" and it worked.
Jessica said:
Thank you @Jack.