Bootstrap 4 CSS customization

en | ja

Using Sass mixins

Mixins

Bootstrap Sass source code uses (over 60) mixins defined in partial files at mixins/ subdirectory (see GitHub repo). They are made for building bootstrap CSS library. But they are also useful for making your own CSS code. Use @include directive.

The example below is a simple demo using a Bootstrap Sass mixin resizable($direction), which is defined in {bootstrap}/scss/mixins/_resize.scss.

mixins.scss (Sass source for this page)
// import bootstrap
@import "bootstrap/scss/bootstrap";

// Add "resizable" utility class
.resizable {
  @include resizable(both);
}

DEMO: The alert below is resizable with .resizable utility class, which is made with Bootstrap Sass mixin resizable($direction).

This inner paragraph is also resizable with .resizable utility class, which is made with Bootstrap Sass mixin resizable($direction)