Core Code
Core Code Modern Dev Handbook

Responsive Card Grid

Create responsive card layouts that adapt across breakpoints.

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-12 col-md-6 col-lg-4">

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

</div>

<div class="col-12 col-md-6 col-lg-4">

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

</div>

<div class="col-12 col-md-6 col-lg-4">

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

</div>

</div>

</div>

</body>
</html>

More BS5 Breakpoints Examples (7)

example Basic Breakpoint Columns open example example MD Breakpoint Layout open example example Multiple Breakpoints open example example Stacked to Horizontal Layout open example example Responsive Visibility open example example Responsive Container open example example Responsive Navbar Layout open example