BootStrap 5 Layout Grid System
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.
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" > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ 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.
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" > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ h1 > < h3 >BootStrap5 Layout Grid system</ h3 > < section class = "container" > < section class = "row" > < section class="col border bg-danger"> w3wiki </ section > < section class="col border bg-secondary"> w3wiki </ section > < section class="col border bg-primary"> w3wiki </ section > < section class="col border bg-info"> w3wiki </ section > < section class="col border bg-warning"> w3wiki </ section > </ section > < br >< br > < section class = "row" > < section class="col border bg-secondary"> w3wiki </ section > < section class="col border bg-success"> w3wiki </ section > < section class="col border bg-danger"> w3wiki </ section > < section class="col border bg-primary"> w3wiki </ section > </ section > </ section > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/grid/