Core Code
Core Code Modern Dev Handbook

Card Grid Layout

Arrange cards inside a responsive grid layout.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<div class="row">

<div class="col-md-4">

<div class="card">

<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Example content.</p>
</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Example content.</p>
</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Example content.</p>
</div>

</div>

</div>

</div>

</div>

</body>
</html>

More BS5 Cards Examples (7)

example Basic Card open example example Card with Image open example example Card with Header and Footer open example example Card Image Overlay open example example Horizontal Card open example example Card with List Group open example example Card Layout Example open example