Bootstrap 4 Cards of same height in columns

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>

 

Technology published

Buy Me Coffee


Was this page helpful?

Yes Yes! this solution to the problem was helpful. No No! this solution to the problem was not helpful..
Buy Me Coffee


Please Login to Continue

How to Draw Realistic Photos (E-Book)

How to Draw Realistic Photos (E-Book)

$1

Why Software Development Need Ethics to Succeed (E-Book)

Why Software Development Need Ethics to Succeed (E-Book)

$1

How to Make a Social Media Website in Easy Steps

How to Make a Social Media Website in Easy Steps

$1




© 2020 - ErnesTech - Privacy