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.