Bootstrap 4 Grid System (Flex)
Bootstrap v4.1.2 grid system and layout utilities.
Here's what you get that Bootstrap 4 currently doesn't provide out of the box:
If you don't need any of the above, Bootstrap 4 already includes a grid only version with its Bootstrap CSS and JS bundle.
How to Use
Sass and CSS files are ready to be used in your project.
css/grid.css and add it to your project.
You will need to include the whole
scss folder contents to your project.
Then, just import
grid.scss into your project's sass file.
npm install bootstrap-4-grid
yarn add bootstrap-4-grid
We use autoprefixer to add prefixes to the
By default, the last 2 versions for each major browser is supported. To change this, follow the customization
NOTE: Sass files do not include any browser specific prefixes. If you include them in your project,
you will need to use your own post css tool to add prefixes for different browsers. If you are using
Angular CLI though, then
autoprefixer is included by default
and you don't need to worry.
The grid options are located inside the
scss/grid.scss file. If you are going to be using the sass files in
your project, changing those will suffice. If you are going to be using the CSS files, then you will need to
change the options and then compile. For more details, see the customization instructions bellow.
NOTE: If you are using the sass files and you want to avoid your options getting overridden by an update,
then copy and paste the options to your own sass file and include them before the
You can roll your own build and/or change browser support.
Then install the dependencies:
Change Browser Support
To change the default browser support (last 2 versions currently), you will need to first change the query
browserlist file, located at the root of this project. Read more about the
Change Grid Options
scss/grid.scss and change the default options.