m-spyratos/bootstrap-4-grid

Bootstrap 4 grid system and layout utilities.

Bootstrap 4 Grid System (Flex)

Bootstrap v4.4.1 grid system and layout utilities.

What's Included

• Grid
• Layout Utilities

Why?

Here's what you get that Bootstrap 4 currently doesn't provide out of the box:

• Grid Equal-Width Multi-Row
• Sizing Utility
• Display Utility
• Spacing Utility
• Visibility Utility
• Position Utility
• Text Utility
• Screen Readers Utility

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

Pretty straightforward. Just get css/grid.min.css or css/grid.css and add it to your project.

Sass

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

npm install bootstrap-4-grid

Yarn

yarn add bootstrap-4-grid

Browser Support

We use autoprefixer to add prefixes to the css files. By default, the last 2 versions for each major browser is supported. To change this, follow the customization instructions bellow.

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.

Grid Options

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 grid file.

Customization

You can roll your own build and/or change browser support.

Requirements

• NodeJS
• Grunt CLI
• Sass (not required for changing browser support)

Then install the dependencies:

npm install

Change Browser Support

To change the default browser support (last 2 versions currently), you will need to first change the query in the browserlist file, located at the root of this project. Read more about the supported queries.

Then, run:

grunt browser

Change Grid Options

Open scss/grid.scss and change the default options. Then, run:

grunt

bootstrap-4-grid's Issues

Update to current Bootstrap Version

Please update to current versions (actually beta already).

Thanks

Duplicated css code for spacing

Spacing.scss has been imported twice, one in bootstrap-grid.scss and the other in grid.scss. This results in duplicated css code for spacing related part.

Remove unnecessary code from _variables.scss

I'm using this project to add support for basic grid and positioning utilities from bootstrap without having bootstrap take over my entire project. I wanted to use the breakpoint mixins provided by bootstrap (imported from this project), but I found that, in order to do so, I have to import the variables file, which still has all of the variables from bootstrap.

Is there a reason why all of the variables are still part of the file? I want to remove them (I've forked this repo, and I'll make a PR), but I wanted to ask first, to see if there was a reason why they're still included.

I also was curious why there was file duplication? There are multiple copies of _display and _visibility.

Maybe include bootstrap-reboot.scss?

I know, this package is only for grid system, but bootstrap reset css is a very good choice.
Let me know what you think...

BS 4.4.1 Update

dart-sass 2.0 warnings

Is there are plan to address dart sass warnings as shown below?

Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

node_modules/bootstrap-4-grid/scss/grid/_variables.scss 306:31 @import
node_modules/bootstrap-4-grid/scss/grid/bootstrap-grid.scss 20:9 @import
node_modules/bootstrap-4-grid/scss/grid.scss 54:9 @import
src/styles/index.scss 25:9 root stylesheet

SCSS version Not Working

Hi
I installed your package then import your grid.scss in my stylesheet
but it didn't work
css worked fine any explain for that.?

Update the bootstrap version

Please, update the bootstrap version to 4.6.x (LTS)
Not an issue but rather enhancement.

Maybe pass the version that the user want as an argument during npm install so
npm install bootstrap-grid will always get the LTS from bootstrap other wise npm install bootstrap-grid xxx

Thanks!

Please add responsive utilite to sass folder

Please consider adding text utilities

It would be great if text utilities will be included.

p.s. position utils will also be a great addition 😁