Responsive grid classes for Bootstrap 5. Extends Bootstrap 5 with display: grid utilities. Uses Bootstrap 5 variables and mixins. It will pick up Bootstrap's or your override varaibles such as $grid-breakpoints. To generate responsive grid utilities.

We've got you covered. Use grid-bootstrap

npm i grid-bootstrap5

yarn add grid-bootstrap5

Link our distributed script in your html's head:

<link rel="stylesheet" type="text/css" href="//unpkg.com/grid-bootstrap5"></script>
<!-- `grid-bootstrap` is now available on the page -->

Include the entry point grid-bootstrap-import.scss into your scss file. Replace {relative/path} with the path of your setup

@import '{relative/path}/node_modules/bootstrap/scss/functions';
@import '{relative/path}/node_modules/bootstrap/scss/variables';
@import '{relative/path}/node_modules/bootstrap/scss/mixins';
@import '{relative/path}/node_modules/bootstrap/scss/grid/grid';
@import '{relative/path}/node_modules/grid-bootstrap/scss/variables';

@import '{relative/path}/node_modules/grid-bootstrap5/scss/grid-bootstrap-import';

Or, if you already imported bootstrap sources just import grid bootstrap files

@import '{relative/path}/node_modules/bootstrap/scss/grid/grid';
@import '{relative/path}/node_modules/grid-bootstrap5/scss/grid-bootstrap-import';

You can override the following variables to adapt to your setup.

$max-columns: 8 !default;
$max-rows: 8 !default;

Now you can compile your scss.

TBD

.d-grid

.grid-col-start-#
.grid-col-*-start-#
.grid-col-end-#
.grid-col-*-end-#
...etc

.grid-row-start-#
.grid-row-*-start-#
.grid-row-end-#
.grid-row-*-end-#
...etc

This will create classes to set even width grid columns

.grid-cols-#
.grid-cols-*-#
...etc

.grid-rg-#
.grid-rg-*-#
...etc

.grid-cg-#
.grid-cg-*-#
...etc

.just-self-*-start
.just-self-*-end
.just-self-*-center
.just-self-*-stretch
...etc