grid-bootstrap

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

Looking for Bootstrap 5 support?

We've got you covered. Use grid-bootstrap5

Install

npm i grid-bootstrap

Use ready css

Link our distributed script in your html's head:

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

How to use

For compiling

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-bootstrap/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-bootstrap/scss/grid-bootstrap-import';

Variables

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.

For using compiled

TBD

Generated css classes

General class

.d-grid

Grid col start/end

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

Grid row start/end

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

Grid template columns

This will create classes to set even width grid columns

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

Grid spacing utilities

Row gap

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

Column gap

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

Justify self

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