This chapter will discuss about Bootstrap CSS grid. Bootstrap’s default grid system, developed over a decade, has been widely used and proven effective. It was created without modern CSS features and techniques like the new CSS Grid we see in current browsers.
How it works
Bootstrap 5 introduces the ability to use a CSS Grid-based grid system with additional Bootstrap features for creating responsive layouts using different methods.
- Recompile your Sass after disabling the default grid system by setting $enable-grid-classes to false and enabling CSS Grid with $enable-cssgrid set to true.
- Replace instance of .row with .grid. The class .grid creates a grid-template by setting display: grid.
- Instead of using .col-* classes, use .g-col-* classes because CSS Grid columns use the grid-column property instead of width.
- Customize the column and gutter sizes of the parent .grid using CSS variables –bs-columns and –bs-gap.
Key differences
Let us see differences of CSS grid system when compared to the standard grid system as below:
- The impact of Flex utilities on CSS Grid columns is different.
- Instead of using gutters, use gap that act like margins and replace the horizontal padding in grid system.
- Grid gaps are automatically applied horizontally and vertically in. unlike .rows, .grids do not have negative margins and cannot use margin utilities to adjust the gutters. Refer to the customizing section.
- Modifier classes should be replaced with inline and custom styles (e.g., style=”–bs-columns: 3;” vs class=”row-cols-3″).
- Nesting requires resetting column counts for each nested .grid instance.
Three columns
Use .g-col-4 to create three equal-width columns for all devices. Modify the layout based on viewport size using responsive classes based on viewport size.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Three Columns</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-4 bg-info p-2">First Column</div><div class="g-col-4 bg-light p-2">Second Column</div><div class="g-col-4 bg-warning p-2">Third Column</div></div></div></div></body></html>
Responsive
To adjust your layout for different screen sizes, use responsive classes. For example, start with two columns on smaller screens and then expand to three columns on larger screens.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Responsive</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 g-col-md-4 bg-info">First Column</div><div class="g-col-6 g-col-md-4 bg-light">Second Column</div><div class="g-col-6 g-col-md-4 bg-warning">Third Column</div></div></div></div></body></html>
Compare the two-column layout across at all screen sizes.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Two Column Layout</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div></div></div></div></body></html>
Wrapping
Grid items wrap to the next line when there’s no more horizontal space, with gaps applying to both horizontal and vertical spacing.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Wrapping</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>
Starts
- Start classes are a shorthand version of CSS Grid’s grid-column-start and grid-column-end properties, used to create grid templates by specifying column starting and ending points.
- They are used in combination with column classes for column sizing and alignment, starting from 1 as 0 is not a valid value for these properties.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Starts</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-3 g-start-2 bg-info">First Column</div><div class="g-col-4 g-start-6 bg-warning">Second Column</div></div></div></div></div></body></html>
Auto columns
Without any classes on grid items, they will automatically be sized to one column within a .grid.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Auto Column</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="bg-info">First</div><div class="bg-warning">Second</div><div class="bg-info">Third</div><div class="bg-warning">Four</div><div class="bg-info">Five</div><div class="bg-warning">Six</div><div class="bg-info">Seven</div><div class="bg-warning">Eight</div><div class="bg-info">Nine</div><div class="bg-warning">Ten</div></div></div></div></body></html>
Grid column classes can be combined with this behaviour.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Auto Column</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center"><div class="g-col-6">First</div><div>Second</div><div>Third</div><div>Four</div><div>Five</div><div>Six</div><div>Seven</div></div></div></div></body></html>
Nesting
CSS Grid system enables simple nesting of .grids, and unlike the default grid, it inherits modifications made to rows, columns, and gaps. To implement nesting consider the following scenario:
- The default number of columns is overridden with a local CSS variable: –bs-columns: 3.
- The number of columns in the first auto-column is maintained, and each column takes up one-third of the total width.
- set the nested .grid‘s column count to 12 (our default) in the second auto-column.
- There are no nested items in the third auto-column.
In comparison to the basic grid structure, this enables more complex and custom layouts in practice.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Nesting</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center p-3" style="--bs-columns: 3;"><div class="bg-secondary text-white">First Auto-column <div class="grid p-3"><div class="bg-warning">1</div><div class="bg-info">2</div></div></div><div class="bg-secondary text-white"> Second Auto-column <div class="grid p-3" style="--bs-columns: 12;"><div class="g-col-6 bg-warning">1</div><div class="g-col-4 bg-info">2</div><div class="g-col-2 bg-warning">3</div></div></div><div class="bg-secondary text-white">Third Auto-column</div></div></div></div></body></html></pre>Customizing
Customize column and row count, along with gap width, using local CSS variables.
Variable Fallback value Description --bs-rows1The number of rows in your grid template --bs-columns12The number of columns in your grid template --bs-gap1.5remThe size of the gap between columns (vertical and horizontal) CSS variables without default values use fallback values until a local instance is specified. For instance, var(--bs-rows, 1) is used for CSS Grid rows, overriding the fallback value of 1 when --bs-rows is defined.
No grid classes
The grid items within the .grid element will be sized automatically without using .g-col class.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">No Grid Classes</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 3;"><div class="bg-info">First Column</div><div class="bg-light">Second Column</div><div class="bg-warning">Third Column</div></div></div></div></body></html>Columns and gaps
Let's modify the column count and spacing as demonstrated below:
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Column and Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;"><div class="g-col-2 bg-info">First Column</div><div class="g-col-2 bg-warning">Second Column</div></div></div></div></body></html>Change the gap and the number of columns using --bs-columns: 10; and --bs-gap: 1rem;.s.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Column and Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-4 bg-warning">Second Column</div></div></div></div></body></html>Adding rows
Follwing example demonstartes rearranging of columns and increasing the number of rows:
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Adding Rows</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;"><div class="bg-info">First Column</div><div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div><div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div></div></div></div></body></html>Gaps
Modify only the row-gap to change the vertical gaps in the grids. Use gap on .grids and the row-gap and column-gap can be adjusted as required.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="row-gap: 0;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>You can specify a single or pair of values for vertical and horizontal gaps using inline style or the CSS variable --bs-gap.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Gaps</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-gap: .25rem 1rem;"><div class="g-col-6 bg-info">First Column</div><div class="g-col-6 bg-warning">Second Column</div><div class="g-col-6 bg-info">Third Column</div><div class="g-col-6 bg-warning">Fourth Column</div></div></div></div></body></html>Sass
One drawback of CSS Grid is that the number of classes generated in the compiled CSS is predetermined by the values of $grid-columns and $grid-gutter-width Sass variables.
- Recompile your CSS after changing those default Sass variables.
- To enhance the existing classes, use inline or custom styles.
You can modify the column count, gap size, and size using inline styles and predefined CSS Grid column classes (e.g., .g-col-4).https://www.tutorialspoint.com/bootstrap/examples/cssgrid_saas.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - CSS Grid</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-center">Saas</h2><div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"><div class="row"><div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;"><div class="bg-info" style="grid-column: span 14;">First Column</div><div class="g-col-4 bg-warning">Second Column</div></div></div></div></body></html>