Bootstrap Sass Mixin Cheatsheet

bootstrap-sass-mixin-cheatsheet.scss

// Alerts
@include alert-variant($background, $border, $text-color);

// Background Variant
@include bg-variant($parent, $color);

// Border Radius
@include border-top-radius($radius);
@include border-right-radius($radius);
@include border-bottom-radius($radius);
@include border-left-radius($radius);

// Buttons
@include button-variant($color, $background, $border);
@include button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius);

// Center Block
@include center-block();

// Clearfix
@include clearfix();

// Forms
@include form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5);
@include form-control-focus($color: $input-border-focus);
@include input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius);

// Gradients
@include gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%);
@include gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%);
@include gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg);
@include gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f);
@include gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f);
@include gradient-radial($inner-color: #555, $outer-color: #333);
@include gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg);

// Grid Framework
@include make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}");
@include float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}");
@include calc-grid-column($index, $class, $type);
@include loop-grid-columns($columns, $class, $type);
@include make-grid($class);

// Grid
@include container-fixed($gutter: $grid-gutter-width);
@include make-row($gutter: $grid-gutter-width);
@include make-xs-column($columns, $gutter: $grid-gutter-width);
@include make-xs-column-offset($columns);
@include make-xs-column-push($columns);
@include make-xs-column-pull($columns);
@include make-sm-column($columns, $gutter: $grid-gutter-width);
@include make-sm-column-offset($columns);
@include make-sm-column-push($columns);
@include make-sm-column-pull($columns);
@include make-md-column($columns, $gutter: $grid-gutter-width);
@include make-md-column-offset($columns);
@include make-md-column-push($columns);
@include make-md-column-pull($columns);
@include make-lg-column($columns, $gutter: $grid-gutter-width);
@include make-lg-column-offset($columns);
@include make-lg-column-push($columns);
@include make-lg-column-pull($columns);

// Hide Text
@include text-hide();

// Image
@include img-responsive($display: block);
@include img-retina($file-1x, $file-2x, $width-1x, $height-1x);

// Labels
@include label-variant($color);

// List Group   
@include list-group-item-variant($state, $background, $color);

// Nav Divider
@include nav-divider($color: #e5e5e5);

// Nav Vertical Align
@include navbar-vertical-align($element-height);

// Opacity
@include opacity($opacity);

// Pagination
@include pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius);

// Panels
@include panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border);

// Progress Bar
@include progress-bar-variant($color);

// Reset Filter 
@include reset-filter();

// Resize
@include resizable($direction);

// Responsive Visibility
@include responsive-visibility($parent);
@include responsive-invisibility($parent);

// Size
@include size($width, $height);
@include square($size);

// Tab Focus
@include tab-focus();

// Table Row
@include table-row-variant($state, $background);

// Text Emphasis
@include text-emphasis-variant($parent, $color);

// Text Overflow
@include text-overflow();

// Vendor Prefixes
@include animation($animation);
@include animation-name($name);
@include animation-duration($duration);
@include animation-timing-function($timing-function);
@include animation-delay($delay);
@include animation-iteration-count($iteration-count);
@include animation-direction($direction);
@include animation-fill-mode($fill-mode);
@include backface-visibility($visibility);
@include box-shadow($shadow...);
@include box-sizing($boxmodel);
@include content-columns($column-count, $column-gap: $grid-gutter-width);
@include hyphens($mode: auto);
@include placeholder($color: $input-color-placeholder);
@include scale($ratio...);
@include scaleX($ratio);
@include scaleY($ratio);
@include skew($x, $y);
@include translate($x, $y);
@include translate3d($x, $y, $z);
@include rotate($degrees);
@include rotateX($degrees);
@include rotateY($degrees);
@include perspective($perspective);
@include perspective-origin($perspective);
@include transform-origin($origin);
@include transition($transition...);
@include transition-property($transition-property...);
@include transition-delay($transition-delay);
@include transition-duration($transition-duration...);
@include transition-timing-function($timing-function);
@include transition-transform($transition...);
@include user-select($select);

Nice job !

Thanks

Awesome!

Thanks. This is my daily reading since I started on Bootstrap 4.
Feel free to add my (public) logo montage to your project. So when sharing this will get displayed as thumbnail.

• https://i.imgur.com/FpV7oRR.png