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)