All New Bootstrap 5 Sass Mixins [Cheat sheet with examples]

bootstrap-5-sass-mixins-cheat-sheet.scss

/* -------------------------------------------------------------------------- */
// All Bootstrap 5 Sass Mixins [ Cheat sheet ]
// Updated to Bootstrap v5.1.x
// @author https://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/main/scss/mixins
// @see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
/* -------------------------------------------------------------------------- */

// Options
// @see https://getbootstrap.com/docs/5.1/customize/options/
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

// Grid variables
// Set the number of columns and specify the width of the gutters.
// @see https://getbootstrap.com/docs/5.1/layout/grid/#variables
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-row-columns: 6;
$gutters: $spacers;

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);

/* -------------------------------------------------------------------------- */

// Media queries
// @see https://getbootstrap.com/docs/5.1/layout/breakpoints/#media-queries

// Min-width
// Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) {  }`
@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints);
// Examples
@include media-breakpoint-up(sm) {  }
@include media-breakpoint-up(md) {  }
@include media-breakpoint-up(lg) {  }
@include media-breakpoint-up(xl) {  }
@include media-breakpoint-up(xxl) {  }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
    display: none;
}
@include media-breakpoint-up(sm) {
    .custom-class {
        display: block;
    }
}

// Max-width
// We occasionally use media queries that go in the other direction (the given screen size or smaller);:
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) {  }`
@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints);
// Examples
@include media-breakpoint-down(sm) {  }
@include media-breakpoint-down(md) {  }
@include media-breakpoint-down(lg) {  }
@include media-breakpoint-down(xl) {  }
@include media-breakpoint-down(xxl) {  }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
    .custom-class {
        display: block;
    }
}

// Single breakpoint
// There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints);
// Examples
@include media-breakpoint-only(xs) {  }
@include media-breakpoint-only(sm) {  }
@include media-breakpoint-only(md) {  }
@include media-breakpoint-only(lg) {  }
@include media-breakpoint-only(xl) {  }
@include media-breakpoint-only(xxl) {  }

// Between breakpoints
// Similarly, media queries may span multiple breakpoint widths:
@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints);
// Example
@include media-breakpoint-between(md, xl) {  }

/* -------------------------------------------------------------------------- */

// Grid system
// @see https://getbootstrap.com/docs/5.1/layout/grid/#sass-mixins

// Creates a wrapper for a series of columns
@include make-row($gutter: $grid-gutter-width);

// Make the element grid-ready (applying everything but the width);
@include make-col-ready($gutter: $grid-gutter-width);

// Without optional size values, the mixin will create equal columns (similar to using .col);
@include make-col($size: false, $columns: $grid-columns);
@include make-col-auto();

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

// Row columns
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@include row-cols($count);

// Container
@include make-container($gutter: $container-padding-x);

// Example usage
/*
<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>
*/
// Usage
.example-container {
    @include make-container();
    // Make sure to define this width after the mixin to override
    // `width: 100%` generated by `make-container()`
    width: 800px;
}
.example-row {
    @include make-row();
}

.example-content-main {
    @include make-col-ready();

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

.example-content-secondary {
    @include make-col-ready();

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

/* -------------------------------------------------------------------------- */

// Utility generator
// Used to generate utilities & print utilities
// @see https://getbootstrap.com/docs/5.1/utilities/api/
@include generate-utility($utility, $infix, $is-rfs-media-query: false);

/* -------------------------------------------------------------------------- */

// Alerts
// @see https://getbootstrap.com/docs/5.1/components/alerts/#variant-mixin
@include alert-variant($background, $border, $color);

/* -------------------------------------------------------------------------- */

// Border-radius
// @see https://getbootstrap.com/docs/5.1/utilities/borders/#mixins
@include border-radius($radius: $border-radius, $fallback-border-radius: false);
@include border-top-radius($radius: $border-radius);
@include border-end-radius($radius: $border-radius);
@include border-bottom-radius($radius: $border-radius);
@include border-start-radius($radius: $border-radius);
@include border-top-start-radius($radius: $border-radius);
@include border-top-end-radius($radius: $border-radius);
@include border-bottom-end-radius($radius: $border-radius);
@include border-bottom-start-radius($radius: $border-radius);

/* -------------------------------------------------------------------------- */

// Shadows
// @see https://getbootstrap.com/docs/5.1/utilities/shadows/
@include box-shadow($shadow...);

/* -------------------------------------------------------------------------- */

// Button variants
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// @see https://getbootstrap.com/docs/5.1/components/buttons/#mixins
@include button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
);
@include button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
);

// Button sizes
@include button-size($padding-y, $padding-x, $font-size, $border-radius); 

/* -------------------------------------------------------------------------- */

// Form control focus state
// @see https://getbootstrap.com/docs/5.1/forms/validation/#mixins
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-color-focus` variable.
@include form-validation-state-selector($state);
@include form-validation-state(
  $state,
  $color,
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
);

/* -------------------------------------------------------------------------- */

// Gradients
// @see https://getbootstrap.com/docs/5.1/utilities/background/#mixins
@include gradient-bg($color: null);
// Horizontal gradient, from left to right
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@include gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%);
// Vertical gradient, from top to bottom
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@include gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null); 
@include gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg); 
@include gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red);
@include gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red); 
@include gradient-radial($inner-color: $gray-700, $outer-color: $gray-800); 
@include gradient-striped($color: rgba($white, .15), $angle: 45deg); 

/* -------------------------------------------------------------------------- */

// Responsive image
// Keep images from scaling beyond the width of their parents.
// @see https://getbootstrap.com/docs/5.1/content/images/
@include img-fluid();

/* -------------------------------------------------------------------------- */

// List Groups
// @see https://getbootstrap.com/docs/5.1/components/list-group/#mixins
@include list-group-item-variant($state, $background, $color);

/* -------------------------------------------------------------------------- */

// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
// @see https://getbootstrap.com/docs/5.1/content/typography/#unstyled
@include list-unstyled();

/* -------------------------------------------------------------------------- */

// Pagination
// @see https://getbootstrap.com/docs/5.1/components/pagination/#mixins
@include pagination-size($padding-y, $padding-x, $font-size, $border-radius);

/* -------------------------------------------------------------------------- */

// Text reset
@include reset-text();

/* -------------------------------------------------------------------------- */

// Resize anything
@include resizable($direction); // Options: horizontal, vertical, both

/* -------------------------------------------------------------------------- */

// Tables
// @see https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-accented-tables-work
@include table-variant($state, $background);

/* -------------------------------------------------------------------------- */

// Text truncate
// Requires inline-block or block for proper styling
// @see https://getbootstrap.com/docs/5.1/helpers/text-truncation/
@include text-truncate();

/* -------------------------------------------------------------------------- */

// Transitions
@include transition($transition...);

/* -------------------------------------------------------------------------- */

// Visually hidden
// @see https://getbootstrap.com/docs/5.1/helpers/visually-hidden/
@include visually-hidden();
@include visually-hidden-focusable();

/* -------------------------------------------------------------------------- */

// Carets
// @see https://getbootstrap.com/docs/5.1/components/dropdowns/#mixins
@include caret-down();
@include caret-up();
@include caret-end();
@include caret-start();
@include caret($direction: down);

/* -------------------------------------------------------------------------- */

// Deprecate mixin
// This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap);
@include deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false);

/* -------------------------------------------------------------------------- */

// New since v4.3: Responsive font-size mixin
// Aliases: @include font-size($fs, $important: false), @include responsive-font-size($fs, $important: false);
// @see https://getbootstrap.com/docs/5.1/content/typography/#responsive-font-sizes
@include rfs($fs, $important: false);

/* -------------------------------------------------------------------------- */

// Clearfix
// @see https://getbootstrap.com/docs/5.1/helpers/clearfix/
@include clearfix();

/* -------------------------------------------------------------------------- */

// Shared between modals and offcanvases
@include overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity);

/* -------------------------------------------------------------------------- */

// Color schemes
// A shorthand mixin for the prefers-color-scheme media query is available with support for light, dark, and custom color schemes.
// @see https://getbootstrap.com/docs/5.1/customize/sass/#color-schemes
@include color-scheme($name);

Doesn't work
Error: Undefined mixin.
╷
54 │ @include media-breakpoint-up($name, $breakpoints: $grid-breakpoints);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
rf0.scss 54:1 root stylesheet

Process finished with exit code 65

@JamesFraserLogan

That is because this example sheet is missing a few things, at least based on my first glance.

You'll need to import all of the bootstrap scss files you intend to include or extend in your code.

EX (your path and needs may be different):
@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/mixins";

And also bootstrap needs to be imported (usually later down the scss file):
@import "../node_modules/bootstrap/scss/bootstrap";

Additionally, it does not appear he has defined or referenced many of the variables used in his core examples like $name, $breakpoints, $gridpoints, etc. I believe he is referencing the mixin function definitions after taking a closer look.

All that said though, there are still some great examples here that can be useful in fully implementing some of these mixins and bootstrap scss techniques. My guess is the author intended this to be a learning tool and/or reference guide, not usable code. Though admittedly it doesn't read like that at first glance.

Thanks so much for the reply; it is very much appreciated. I am working in so many languages that any help or interaction is a godsend. You were absolutely correct; bootstrap needed to be imported directly. After I imported just bootstrap, everything just worked! I can access all of the functions I want with full intellisense (webstorm). Best Regards,

…

-James Logan

On Mon, Feb 7, 2022 at 11:21 AM indepth2 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @JamesFraserLogan <https://github.com/JamesFraserLogan> That is because this example sheet is missing a few things, at least based on my first glance. You'll need to import all of the bootstrap scss files you intend to include or extend in your code. EX (your path and needs may be different): @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/mixins"; And also bootstrap needs to be imported (usually later down the scss file): //import bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; Additionally, it does not appear he has defined or referenced many of the variables used in his core examples like $name, $breakpoints, $gridpoints, etc. At least those do not have default values in my current bootstrap distribution. All that said though, there are still some great examples here that can be useful in fully implementing some of these mixins and bootstrap scss techniques. My guess is the author intended this to be a learning tool and/or reference guide, not usable code. Though admittedly it doesn't read like that at first glance. — Reply to this email directly, view it on GitHub <https://gist.github.com/09c5426ce1619b381b9c4297a6fc0914#gistcomment-4056672>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIY77OLXKUJEMCGF7PD73ATU2AESBANCNFSM5L5AYDNA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.*** .com>