Auto Layout Column
Bootstrap auto-layout columns adjust their width based on content and available space. Use ‘col’ class without specifying a specific size to let columns automatically adjust and fill available space.
Example: Illustration of Auto Layout column using Boostrap
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</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>
Output:
Explanation:
The provided HTML code demonstrates the use of Bootstrap 5’s grid system to create responsive layouts with equal-width columns. The .col-sm
class is used to specify the number of columns on small screens (≥576px), and the columns automatically adjust their width based on the screen size. The columns stack horizontally on extra small screens (less than 576px).
Bootstrap 5 Grid Small
Bootstrap grid system facilitates responsive design by dividing screens into 12 equally sized columns. On smaller screens, use classes like ‘col-sm’ to define column widths. Easily arrange rows and columns within a row based on screen size, ensuring optimal display on smaller devices.
We can also specify the variable width of each element by mentioning the number along with the class, for example, .container-sm-4. If the screen size is less than 576 px, then the element takes up 100% width of the screen.
Breakpoint | Description | Size (px) |
---|---|---|
xs | extra small |
<576 |
sm | small |
≥ 576 |
md | medium |
≥ 768 |
lg | large |
≥ 992 |
xl | extra large |
≥ 1200 |
xxl | extra extra large |
≥ 1400 |
Syntax:
<tag_name class="class-sm">Content of the element </tag_name>