Bootstrap 5 Grid System Row Columns
Last Updated :
15 Apr, 2024
Bootstrap 5 grid system uses rows and columns to structure content. Rows create horizontal groups, while columns divide the page width. The system offers responsive classes for layout adjustments across different screen sizes.
Bootstrap 5 Grid system Row Columns Classes:
| Bootstrap Class | Description |
|---|
| row-cols* | To set the number of columns in a single row 1 to 12 can be created. |
| row-cols-auto | Sets the size of the column according to the content |
| col-* | This class applies to individual columns. |
Syntax:Â
<div class="row row-cols-*">
<div class="col"> ... </div>
...
</div>
<div class="row row-cols-auto">
<div class="col"> ... </div>
...
</div>Examples of Bootstrap 5 Grid System Row Columns
Example 1: In this example we demonstrates Bootstrap 5’s grid system with rows and columns. Rows are organized with predefined column widths, creating responsive layouts for content. using row-cols-2 to create two different columns and row-cols-auto to make grids of rows and columns.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Grid system Row
columns
</h2>
<br />
<div class="container">
<div class="row row-cols-2">
<div
class="col border
border-success"
>
1
</div>
<div
class="col border
border-success"
>
2
</div>
<div
class="col border
border-success"
>
3
</div>
<div
class="col border
border-success"
>
4
</div>
<div
class="col border
border-success"
>
5
</div>
<div
class="col border
border-success"
>
6
</div>
</div>
<br /><br />
<div class="row row-cols-auto">
<div class="col border">
GFG
</div>
<div class="col border">
HTML
</div>
<div class="col border">
CSS
</div>
<div class="col border">
Javascript
</div>
<div class="col border">
1
</div>
</div>
</div>
</div>
</body>
</html>
Output :
Bootstrap 5 Grid System Row Columns Example Output
Example 2: In this example we demonstrates Bootstrap 5’s grid system with responsive column layout. Columns adjust based on screen size, ensuring a consistent and adaptive layout across devices. using row-cols-1 row-cols-sm-2 row-cols-md-4 for responsive behavior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Grid system Row
columns
</h2>
<br />
<div class="container">
<div
class="row row-cols-1
row-cols-sm-2
row-cols-md-4"
>
<div class="col border">
Column
</div>
<div class="col border">
Column
</div>
<div class="col border">
Column
</div>
<div class="col border">
Column
</div>
</div>
</div>
</div>
</body>
</html>
Output :
.gif)
Bootstrap 5 Grid System Row Columns Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...