I'm rolling out the front-end of a web app that is using Bootstrap 4 alpha 6 as the framework.
The data-heavy app is designed to work on screens from ~960px wide or larger, so I want to limit the Bootstrap grid's useage to -lg- and -xl- grid breakpoints with -lg- being the smallest/default.
Removing the lower breakpoints from the map like so does prevent the grid classes for -xs-, -sm- and -md- from being generated but it also does likewise for -lg- causing everything to snap to a single 100% width column.
$grid-breakpoints: (
lg: 0px, // originally 992px
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
I also don't see a way to edit the media queries that would be necessary to achieve what I'm looking for.
Anyone tried this or have any ideas of how it could be done? My other theory is to set:
$enable-grid-classes: false !default;
... and make a custom layout using the mixins provided?