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);