Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
All New Bootstrap 5 Sass Mixins [Cheat sheet with examples]
/* -------------------------------------------------------------------------- */
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment