Including "bootstrap-grid.scss" only leads to somewhat broken grid
Created by: Restuta
I am not sure if this is by design or not. But I wanted to use "BS4 grid only" for my app. I assumed that should be possible, since I see "Grid Only" download option in alpha-docs.
So, when I import bootstrap fully like that: @import 'bower_components/bootstrap/scss/bootstrap';
in my project I see the following grid:
When I change it to use grid only @import 'bower_components/bootstrap/scss/bootstrap-grid';
is see this:
This is not browser specific.
I figured out that it's because "reboot.scss" is not included, so I added:
@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';
That didn't work, since reboot.scss
uses mixins and variables inside without importing them. So I had to manually go and figure it out and the following code fixes that:
@import 'bower_components/bootstrap/scss/mixins/hover';
@import 'bower_components/bootstrap/scss/mixins/tab-focus';
@import 'bower_components/bootstrap/scss/variables';
@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';
To sum up, I think it should be obvious default way to use "just a grid" or "just a grid with reboot" (if by design grid should not include "reboot"). That can be solved with explicit imports added to _reboot.scss
; So the following code would just work:
@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';
If, by design, grid should include "reboot" then also explicit import of "reboot" in a bootstrap-grid.scss
.
What do you think? Should I send a PR?