theandersonn / bootstrap-4-grid

Bootstrap v4.3.1 grid only styles

Bootstrap 4 - Grid

Bootstrap v4.3.1 grid only styles

Cheatsheet

.container
.container-fluid
.row

.col-# (<576px)
.col-sm-# (≥576px)
.col-md-# (≥768px)
.col-lg-# (≥992px)
.col-xl-# (≥1200px)

.col /* equal width cols, same on all screen sizes */
.col-* /* responsive equal width cols, can be sm, md, lg, or xl */

.no-gutters
.offset-*-# /* example (.offset-lg-5) */

.order-#
.nested columns

Mixins (semantic grid)

@include make-container();
@include make-row();
@include make-col-ready();

@include media-breakpoint-up(sm) {
    @include make-col(6);
}

how to modify container width

# Change the variable in: grid/_variables.scss
$container-max-widths

Suport Browsers

IE 10

How to use npm tasks (This step is optional)

1. Download the repository
2. Install dependencies (npm install)

Task listing

• npm dev (converts scss to css)
• npm run build (css compressed)

References

• Bootstrap - Documentation
• Bootstrap - Code

License

MIT © Anderson Nascimento