xxxxxxxxxx
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
</div>
xxxxxxxxxx
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 Cards all same height demo</h1>
<p class="lead">by djibe.</p>
<span class="text-muted">(thx to BS4)</span>
<p>Dependencies : standard BS4</p>
<p>
Enjoy the magic of flexboxes and leave the useless card-decks.
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
A small card content.
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
Another small card content.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Run code snippet
xxxxxxxxxx
In Bootstrap 4, in order for you to be able to set equal width and height cards that aren't attached to one another, you need to use card decks as shown below. In Bootstrap 5, the Bootstrap team removed the card decks since the new grid system offers more responsive control.
<article className='w-50 mx-auto col-4 card-deck'>
<div className="card text-center mb-2 bg-secondary">
<img className="card-img-top" src={flags.png} alt={name.common} />
<div className="card-body">
<h3 className="card-title">Name: {name.common}</h3>
<h4>Official Name: {name.official}</h4>
<p className="card-text">
<h3>Population: {population}</h3>
<h3>Capital: {capital}</h3>
<h3>Area:{area}</h3>
</p>
</div>
</div>
</article>