BootStrap5 Grid system Responsive classes
Last Updated :
15 Apr, 2024
Bootstrap 5 Grid System Responsive classes offer six tiers (xs, sm, md, lg, xl) to customize column sizes, enabling the creation of responsive layouts. This allows seamless adaptation to various screen sizes for optimal user experience.
Bootstrap 5 Grid system Responsive Options:
| Concept | Description |
|---|
| All breakpoints | When you need a particularly sized column, you can use this component of responsive classes. This provides .col and .col* classes to specify a numbered class. |
| Stacked to horizontal | To create a basic grid system that starts out stacked and becomes horizontal, you can use the set of .col-sm-* classes. |
| Mix and match | Simply stack in some grid tiers to your columns. Use a combination of different classes for each tier as per the need. |
| Row columns | Use the row columns classes .row-cols-* to quickly create basic grid layouts or to control your card layouts and override when needed at the column level. |
Examples of BootStrap5 Grid system Responsive classes
Example 1: In this example we demonstrates Bootstrap 5’s responsive grid system, with columns stacking on mobile. One column is full-width, and the other is half-width on larger screens.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous"
/>
<script
src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
</head>
<body class="m-2">
<h3>
Bootstrap5 Grid system Responsive
classes
</h3>
<div class="container">
<!-- Stack the columns on mobile by
making one full-width
and the other half-width -->
<div class="row">
<div
class="col-md-8 border bg-primary"
>
.col-md-8
</div>
<div
class="col-6 col-md-4 border bg-danger"
>
.col-6 .col-md-4
</div>
</div>
</div>
</body>
</html>
Output:
BootStrap5 Grid system Responsive classes Example Output
Example 2: In this example we are showcases Bootstrap 5’s responsive grid system with different column layouts. Columns adjust based on screen size, offering flexibility in designing layouts.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous">
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap5 Grid system Responsive classes</h3>
<div class="container">
<div class="row row-cols-4">
<div class="col border bg-danger">
GFG
</div>
<div class="col border bg-primary">
GFG
</div>
<div class="col border bg-warning">
GFG
</div>
<div class="col border bg-secondary">
GFG
</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row row-cols-auto">
<div class="col border bg-success">
GFG
</div>
<div class="col border bg-secondary">
GFG
</div>
<div class="col border bg-info">
GFG
</div>
<div class="col border bg-danger">
GFG
</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row row-cols-2">
<div class="col border bg-danger">
GFG
</div>
<div class="col border bg-secondary">
GFG
</div>
<div class="col border bg-primary">
GFG
</div>
<div class="col border bg-info">
GFG
</div>
</div>
</div>
</body>
</html>
Output:
BootStrap5 Grid system Responsive classes Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...