How to make divs have the same height using flexbox properties? - html

Question

how to align the height of each column to make them all equal ? I followed the rules from the page: https://www.w3schools.com/howto/howto_css_equal_height.asp, using the properties display:flex and flex: 1, but unfortunately this does not work in my case. Is it affected by the fact that each of these columns is additionally wrapped in bootstrap classes col-12 col-lg-3 ?
HTML code:
<section class="bg-bright container-fluid text-center px-4 py-5">
<div class="row">
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="<?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?>" class="cards__img img-fluid" alt="...">
<p class="cards__text">Kompleksowa obsługa klienta</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="<?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?>" class="cards__img img-fluid" alt="...">
<p class="cards__text">Dbałość o najmniejsze detale</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="<?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?>" class="cards__img img-fluid" alt="...">
<p class="cards__text">Komfort obsługi urządzeń</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="<?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?>" class="cards__img img-fluid" alt="...">
<p class="cards__text">Funkcjonalność</p>
</div>
</div>
</div>
</div>
</section>
CSS code:
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x)/ -2);
margin-left: calc(var(--bs-gutter-x)/ -2);
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.cards {
display: flex;
width: 100%;
align-items: stretch;
}
.cards__body {
background-color: red;
box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
flex: 1;
}
.cards__text {
color: #333;
font-size: 17px;
font-weight: 700;
padding: 1rem;
}

Answer 1

You can use min-height:...
.row {
display:flex;
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.cards {
display: flex;
width: 100%;
align-items: stretch;
}
.cards__body {
background-color: red;
box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
flex: 1;
min-height:300px;
}
.cards__text {
color: #333;
font-size: 17px;
font-weight: 700;
padding: 1rem;
max-width:100%;
}
<section class="bg-bright container-fluid text-center px-4 py-5">
<div class="row">
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
<p class="cards__text">Kompleksowa obsługa klienta klienta klienta</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
<p class="cards__text">Dbałość o najmniejsze detale</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
<p class="cards__text">Komfort obsługi urządzeń</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
<p class="cards__text">Funkcjonalność</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

You have not added .row class in your CSS. It should be
.row {
display: flex;
}
And all your divs are of the same height. You just have applied the background-colour to cards__body instead of .col-lg-3 which is the full height div.
For making inner divs of same height you can give .card__body class flex as flex: 0 0 auto;

Answer 3

The 'flex' css property will define what part of the wrapper width the columns can span. Here's a cool playground for Flexbox: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
Normally the below property should be set to stretch by default, but do try to add this css.
.row {
align-items: stretch;
}
Also if the above doesn't do anything:
.row > div {
height: 100%;
}

Answer 4

(((My version is responsive, please run the code snippet as full page below)))
Wow, this is very tricky with bootstrap. In fact, you don't need to use flexbox to do it and I think using flexbox will break the responsive grid system in mobile view. All you need to do is giving the cards and cards__body both height: 100%;, it will take up all the vertical space in the grid row. However, that will bring up another issue: no spacing in mobile view and you might find that margin no longer doing the job of spacing out the element for the cards. Luckily, you can still use padding for spacing.
Checkout the code below and compare the changes what I commented out the things you don't need and what I added. Happy coding ;)
.col-lg-3 {
/* flex: 0 0 auto;
width: 25%; */
}
.cards {
/* display: flex; */
/* width: 100%; */
/* align-items: stretch; */
margin: auto;
width: fit-content;
height: 100%;
padding-bottom: 1em;
}
.cards__body {
background-color: red;
box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
/* flex: 1; */
height: 100%;
}
.cards__text {
color: #333;
font-size: 17px;
font-weight: 700;
padding: 1rem;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<section class="bg-bright container-fluid text-center px-4 py-5">
<div class="row">
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img
src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"
class="cards__img img-fluid"
alt="..."
/>
<p class="cards__text">Kompleksowa obsługa klienta</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img
src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"
class="cards__img img-fluid"
alt="..."
/>
<p class="cards__text">Dbałość o najmniejsze detale</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img
src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"
class="cards__img img-fluid"
alt="..."
/>
<p class="cards__text">Komfort obsługi urządzeń</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="cards">
<div class="cards__body">
<img
src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"
class="cards__img img-fluid"
alt="..."
/>
<p class="cards__text">Funkcjonalność</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>