BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid.
How it works: Here’s how the grid system comes together:
- Its grid supports six responsive breakpoints. You can control container, column sizing and behavior by each breakpoint.
- Containers center and horizontally pad your content. Use container class for responsive width and container-fluid class for 100% width across all viewports and devices. Use container-md class for both fluid and pixel width.
- Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.
- Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns.
- Gutters are also responsive with customizable available across all breakpoints. We can change horizontal gutters with .gx-* and vertical gutters with .gy-*
BootStrap5 Layout Grid System:
- Grid options: Bootstrap’s grid system works for all six breakpoints i.e xs, sm, md, lg, xl, xxl.
- Auto-layout columns: This provides the creation of easy column sizes without an explicit numbered class.
- Responsive classes: They provide predefined classes for building complex responsive, dynamic, and flexible layouts.
- Nesting: We need to add a new row and set of columns for nesting which includes a set of columns that add up to 12 or fewer.
- Sass: This system also provides Sass variables and mixins to create custom and responsive page layouts.
- Customizing the grid: This is used to customize your grid as you want by using built-in grid Sass variables and map.
Example 1: Let's see an example of auto-layout columns.
<!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">
</head>
<body class="m-2">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>BootStrap5 Layout Grid system</h3>
<section class="container">
<section class="row">
<section class="col border bg-success">
GFG Column 1
</section>
<section class="col border bg-secondary">
GFG Column 2
</section>
<section class="col border bg-danger">
GFG Column 3
</section>
</section>
<br>
<section class="row">
<section class="col border bg-warning">
GFG Column 1
</section>
<section class="col-6 border bg-light">
GFG Column 2
</section>
<section class="col border bg-info">
GFG Column 3
</section>
</section>
</section>
</body>
</html>
Output:
Example 2: Let us see an example of equal width.
<!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">
</head>
<body class="m-2">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>BootStrap5 Layout Grid system</h3>
<section class="container">
<section class="row">
<section class="col border
bg-danger">
GeeksforGeeks
</section>
<section class="col border
bg-secondary">
GeeksforGeeks
</section>
<section class="col border
bg-primary">
GeeksforGeeks
</section>
<section class="col border
bg-info">
GeeksforGeeks
</section>
<section class="col border
bg-warning">
GeeksforGeeks
</section>
</section>
<br><br>
<section class="row">
<section class="col border
bg-secondary">
GeeksforGeeks
</section>
<section class="col border
bg-success">
GeeksforGeeks
</section>
<section class="col border
bg-danger">
GeeksforGeeks
</section>
<section class="col border
bg-primary">
GeeksforGeeks
</section>
</section>
</section>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/grid/