I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height.
Additionally, I anticipate adding more cards at the bottom in the future.
https://i.sstatic.net/gtjPo.png
Here is a snippet from my CSS file:
.CountryDetail {
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: 15%;
margin-right: 15%;
}
.cards {
background: #fcfcfc;
margin: 20px 40px;
transition: 0.4s all;
width: 800px;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.icon-size {
font-size: 50px;
}
.shadow-1 {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
box-sizing: border-box;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
}
...
And here is a portion of my JavaScript file:
<div className="CountryDetail">
<div className="cards shadow-1 container">
...
</div>
<div className="cards shadow-1 container">
...
</div>
</div>
I have attempted to adjust the line-height or height properties within the cards class; however, this ended up affecting the height of the contents inside the card.
If I try modifying the "cards" class by adding min-height like so:
.cards {
min-height: 200px;
...
}
This results in the following output: https://i.sstatic.net/zlR5J.png