<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Auto Layout Columns</h1>
<p>
In Bootstrap 5, you can easily create equal
width columns by using the <code>.col-sm</code>
class on a specified number of col elements.
Bootstrap will automatically adjust the width
of each column based on the
number of columns specified.
</p>
<p>
On extra small screens (<strong>less than 576px</strong>),
the columns will stack horizontally.
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-success text-white">
1 of 2
</div>
<div class="col-sm bg-info text-white">
2 of 2
</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white">
1 of 4
</div>
<div class="col-sm bg-secondary text-white">
2 of 4
</div>
<div class="col-sm bg-danger text-white">
3 of 4
</div>
<div class="col-sm bg-warning text-white">
4 of 4
</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-dark text-white">
1 of 3
</div>
<div class="col-sm bg-light text-dark">
2 of 3
</div>
<div class="col-sm bg-dark text-white">
3 of 3
</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white">
1 of 6
</div>
<div class="col-sm bg-secondary text-white">
2 of 6
</div>
<div class="col-sm bg-danger text-white">
3 of 6
</div>
<div class="col-sm bg-warning text-white">
4 of 6
</div>
<div class="col-sm bg-success text-white">
5 of 6
</div>
<div class="col-sm bg-info text-white">
6 of 6
</div>
</div>
</div>
</div>
</body>
</html>