Bootstrap Responsive Grid

Define different gutters and container margins for each breakpoint when using Bootstrap.

This package can be used as a wrapper around Bootstrap 4 and provides variables to customise the gutter widths and the container margins separately for each break-points and independently of each other.

Usage

Installation

Install using npm, e.g.:

npm install --save bootstrap-responsive-grid

Setup

You can use scss/bootstrap.scss or scss/bootstrap-grid.scss from this package the same way as you would use them from Bootstrap.

Simple Bootstrap

In your main scss file instead of: @import "~bootstrap";

you can use: @import "~bootstrap-responsive-grid";

Bootstrap Grid

If you are using only the Bootstrap grid, instead of: @import "~bootstrap/scss/bootstrap-grid";

you can use: @import "~bootstrap-responsive-grid/scss/bootstrap-grid";

Bootstrap by Components

If you would like more granular control over the specific Bootstrap components, you can make a copy of scss/bootstrap/bootstrap.scss from this package into your project. To make it work, you need to change the path of the imports from this package, because they need different path when used outside the package.

So instead of this (bootstrap.scss shipped in this package):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "../variables"; // An original file from bootstrap-responsive-grid
@import "~bootstrap/scss/mixins.scss"; // .scss to distinguish from the folder
@import "mixins/grid-framework"; // A modified Bootstrap file, overriding some mixins
@import "mixins/grid"; // A modified Bootstrap file, overriding some mixins
@import "../mixins"; // An original file from bootstrap-responsive-grid
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "grid"; // A modified Bootstrap file, replacing "~bootstrap/scss/grid"
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
// etc.

You should have this modified copy in your project:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap-responsive-grid/scss/variables"; // Changed path
@import "~bootstrap/scss/mixins";
@import "~bootstrap-responsive-grid/scss/bootstrap/mixins/grid-framework"; // Changed path
@import "~bootstrap-responsive-grid/scss/bootstrap/mixins/grid"; // Changed path
@import "~bootstrap-responsive-grid/scss/mixins"; // Changed path
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap-responsive-grid/scss/bootstrap/grid"; // Changed path
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
// etc.

Now you can remove or comment out any modules not needed.

Note: The order of the imports are important because of dependencies and overrides, so don't change them unless you know what you are doing!

Configuration

Similar to Bootstrap, the package uses SCSS variables as the entry point for your settings. The default configuration matches the out-of-the-box default behaviour of Bootstrap: 30px for gutters and 15px for container margins on all resolutions.

To customise these, add the following SCSS map variables before importing the package files:

$grid-gutter-widths: (
  xs: 10px,
  sm: 20px,
  md: 30px,
  lg: 40px,
  xl: 60px
);

$grid-container-margins: (
  xs: 20px,
  sm: 30px,
  md: 40px,
  lg: 60px,
  xl: 80px
);

The xs part is mandatory in both maps. The other breakpoints from sm and above are optional. Any breakpoint not provided in the map will use the same value from the breakpoint below.

To take full control of the Bootstrap grid system you may also want to customise the $container-max-widths and $grid-breakpoints default Bootstrap map variables. For details see scss/_variables.scss in the original Bootstrap package.

FAQ

• Why there are no bootstrap.css, bootstrap.min.css, bootstrap-grid.css or bootstrap-grid.min.css files?

  • It would be impossible to customise the SCSS variables within precompiled CSS files. So this whole thing only makes sense if you are working with the SCSS sources. If you would like to compile the css files from this package, first, make sure you modify the default scss/_variables.scss file and run the npm run css-compile-main command. The generated css files should appear in the dist/css folder. However it is recommended to rather @import the SCSS files of this package (as described above) and build your final css file together with the rest of your styles, for example using Webpack.

• Why there is no dist/js folder generated by this package?

  • This packages changes nothing related to the JavaScript files, so it is fine to use the js files from the official Bootstrap package.

Side effects

Note: This section only applies if your $grid-gutter-widths are not exactly half of the corresponding $grid-container-margins. Otherwise, everything works the same as in standard Bootstrap!

Normally in Bootstrap the two value always balance each other. By default, the gutter is 30px, and there is a 15-15px padding on each side of the containers. Because of this, the rows always reach the full width of their containers, and the space available inside a 12 wide column is the same as the space available inside the container.

This means a row in a fluid container always spans the full width of the viewport, and rows together with fluid containers can be well utilised to set full width background colors or images.

However, when the container margins do not exactly match the half of the gutter widths, rows inside containers do not span the full inner width of the containers. There is no trivial way around it since the negative margins of the rows MUST match the column paddings to keep the layout working.

This is not really an issue in most cases, as the width of a row is not important from a visual perspective in most cases. However, when a row is used to paint the background of a section this can be an issue.

For this reason an additional class is introduced: row-fluid. It can be used as a drop in replacement for row class. A <div class=row-fluid"> inside a container always spans the full inner width of the container. The downside however that columns would not align with the rest of the layout inside such a row.

But since such row spans the full inner width of the parent container, a non-fluid container can be used inside to build a normal layout.

This may be confusing, so here's an example of equivalent setup in Bootstrap, and Bootstrap Responsive Grid configured with non-matching gutters and margins:

<!-- Bootstrap: -->
<div class="container-fluid">
    <div class="row" style="background-color: darkred;">
        <div class="col">
            <div class="cell">content</div>
        </div>
    </div>
</div>

<!-- Bootstrap Responsive Grid: -->
<div class="container-fluid">
    <div class="row-fluid" style="background-color: darkred;">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="cell">content</div>
                </div>
            </div>
        </div>
    </div>
</div>

Issues

Known Issues

The css files generated by the mixins have a little overhead compared to the default Bootstrap, however this is not significant (<10kB, ~3% for bootstrap.css and ~9% for bootstrap-grid.css). This could be further reduced by refactoring some of the custom SCSS code, but this is still better than using default Bootstrap grid and adding additional code after to manually override the grid parameters.

Unknown Issues

This is not a well tested solution. It works fine for me, and I'll fix any issues I find with it, but your mileage may vary. If you find any issues, please report here, and I'll try to fix it so this package can be improved. Pull requests are welcome as well!

Acknowledgement

The inspiration for this package came from Custom gutters bootstrap-plugin by DZakh.

---

Bence Szalai - https://sbnc.eu/