Core Code
Core Code Modern Dev Handbook

Responsive Columns

Change column layout at different breakpoints using responsive classes.

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-6 bg-light p-4">
Half width on md+
</div>

<div class="col-md-6 bg-secondary text-white p-4">
Half width on md+
</div>

</div>

</div>

</body>
</html>

More BS5 Grid System Examples (7)

example Basic Grid Layout open example example Equal Width Columns open example example Column Sizing open example example Auto Layout Columns open example example Nested Grid open example example Grid Alignment open example example Three Column Layout open example