Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 Sass Mixins [Cheat sheet with examples]
/* -------------------------------------------------------------------------- */
// All Bootstrap 4 Sass Mixins [Cheat sheet]
// Updated to Bootstrap v4.3.x
// @author https://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
/* -------------------------------------------------------------------------- */
// Grid variables
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
/* -------------------------------------------------------------------------- */
// Breakpoint viewport sizes and media queries.
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
// Example usage
.some-class {
@include media-breakpoint-up(sm) {
// Larger than sm: 576px
display: inline;
}
@include media-breakpoint-down(md) {
// Smaller than md: 768px
display: block;
}
}
/* -------------------------------------------------------------------------- */
// Grid system
// @see https://getbootstrap.com/docs/4.3/layout/grid/#sass-mixins
// Generate semantic grid columns with these mixins.
@include make-container($gutter: $grid-gutter-width)
// For each breakpoint, define the maximum width of the container in a media query
@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
// 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)
@include make-col($size, $columns: $grid-columns)
@include make-col-offset($size, $columns: $grid-columns)
// 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>
*/
.example-container {
width: 800px;
@include make-container();
}
.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);
}
}
/* -------------------------------------------------------------------------- */
// Alerts
@include alert-variant($background, $border, $color)
/* -------------------------------------------------------------------------- */
// Contextual backgrounds
@include bg-variant($parent, $color)
@include bg-gradient-variant($parent, $color)
/* -------------------------------------------------------------------------- */
// Badges
@include badge-variant($bg)
/* -------------------------------------------------------------------------- */
// Single side border-radius
@include border-radius($radius: $border-radius, $fallback-border-radius: false)
@include border-top-radius($radius)
@include border-right-radius($radius)
@include border-bottom-radius($radius)
@include border-left-radius($radius)
@include border-top-left-radius($radius)
@include border-top-right-radius($radius)
@include border-bottom-right-radius($radius)
@include border-bottom-left-radius($radius)
/* -------------------------------------------------------------------------- */
// Shadows
@include box-shadow($shadow...)
/* -------------------------------------------------------------------------- */
// Button variants
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@include button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%))
@include button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color)
// Button sizes
@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
/* -------------------------------------------------------------------------- */
// Clearfix
// @see https://getbootstrap.com/docs/4.3/utilities/clearfix/
@include clearfix()
/* -------------------------------------------------------------------------- */
// Float
// @see https://getbootstrap.com/docs/4.3/utilities/float/
@include float-left()
@include float-right()
@include float-none()
/* -------------------------------------------------------------------------- */
// Form control focus state
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-color-focus` variable.
@include form-control-focus()
@include form-validation-state($state, $color, $icon)
/* -------------------------------------------------------------------------- */
// Gradients
@include gradient-bg($color)
// 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: 0%, $end-percent: 100%)
@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)
/* -------------------------------------------------------------------------- */
// Framework grid generation
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@include make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints)
/* -------------------------------------------------------------------------- */
// Hover state
@include hover()
@include hover-focus()
@include plain-hover-focus()
@include hover-focus-active()
/* -------------------------------------------------------------------------- */
// Responsive image
// Keep images from scaling beyond the width of their parents.
@include img-fluid()
// Retina image
// Short retina mixin for setting background-image and -size.
@include img-retina($file-1x, $file-2x, $width-1x, $height-1x)
/* -------------------------------------------------------------------------- */
// List Groups
@include list-group-item-variant($state, $background, $color)
/* -------------------------------------------------------------------------- */
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@include list-unstyled()
/* -------------------------------------------------------------------------- */
// Horizontal dividers
// Dividers (basically an hr) within dropdowns and nav lists
@include nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y)
/* -------------------------------------------------------------------------- */
// Navbar vertical align
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
// @include navbar-vertical-align($element-height)
/* -------------------------------------------------------------------------- */
// Pagination
@include pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
/* -------------------------------------------------------------------------- */
// Text reset
@include reset-text()
/* -------------------------------------------------------------------------- */
// Resize anything
@include resizable($direction) // Options: horizontal, vertical, both
/* -------------------------------------------------------------------------- */
// Only display content to screen readers
// @see https://getbootstrap.com/docs/4.3/utilities/screen-readers/
@include sr-only()
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@include sr-only-focusable()
/* -------------------------------------------------------------------------- */
// Sizing shortcuts
@include size($width, $height: $width)
/* -------------------------------------------------------------------------- */
// Tables
@include table-row-variant($state, $background)
/* -------------------------------------------------------------------------- */
// Typography
@include text-emphasis-variant($parent, $color)
/* -------------------------------------------------------------------------- */
// CSS image replacement
// @see https://getbootstrap.com/docs/4.3/utilities/image-replacement/
@include text-hide($ignore-warning: false)
/* -------------------------------------------------------------------------- */
// Text truncate
// Requires inline-block or block for proper styling
@include text-truncate()
/* -------------------------------------------------------------------------- */
// Transitions
@include transition($transition...)
/* -------------------------------------------------------------------------- */
// Visibility
// @see https://getbootstrap.com/docs/4.3/utilities/visibility/
@include invisible($visibility) // Options: collapse, hidden, visible
/* -------------------------------------------------------------------------- */
// Carets
@include caret-down()
@include caret-up()
@include caret-right()
@include caret-left()
@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)
@umanga907

This comment has been minimized.

Copy link

umanga907 commented Mar 21, 2018

Thanks,
bootstrap 4 does not has mixin for transform(rotate,skew) ?

@amaduela

This comment has been minimized.

Copy link

amaduela commented May 4, 2018

Thank You! I needed to create a rule that on mobile landscape it rotates and make a six column grid, which i achieve by using:
@include make-col-ready();
@include media-breakpoint-up('sm') {
@include make-col(6);
float: left;
}

@mattez

This comment has been minimized.

Copy link

mattez commented Jul 2, 2018

Thank You!
Please make some updates. Right now I'm missing
@include make-col-offset($size, $columns: $grid-columns) from mixins/_grid.scss

@BryanBarrera

This comment has been minimized.

Copy link

BryanBarrera commented Jul 3, 2018

is there a mixin to center a grid box?

it used to be @include center-block();

@anschaef

This comment has been minimized.

Copy link
Owner Author

anschaef commented Jul 16, 2018

@mattez Thanks, updated to Bootstrap v 4.1.x

@BryanBarrera Doesn't seem so. You can create your own mixin with:

@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

@dawidnawrot

This comment has been minimized.

Copy link

dawidnawrot commented Nov 7, 2018

@anschaef Awesome job mate! Very useful cheat-sheet. This kind of cheat-sheet should be officially provided by Bootstrap team.

@oueryemchi

This comment has been minimized.

Copy link

oueryemchi commented Nov 12, 2018

so this is a working mixin? @include transition($transition...), doesn't make sense

@anschaef

This comment has been minimized.

Copy link
Owner Author

anschaef commented Dec 17, 2018

so this is a working mixin? @include transition($transition...), doesn't make sense

this is just an example, of course. the mixin would be:

.foobar { @include transition(all .3s ease); }

which compiles to:

.foobar { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

@JLammer

This comment has been minimized.

Copy link

JLammer commented Jan 21, 2019

@anschaef

Just found this gist, right after finishing a whole documentation for functions, mixins and variables. I've used SassDoc to build something visually better than comments and it uses real simple annotation system.

Besides that, I also just found out that the official team is making an official documentation for mixins.

Feel free to PR some of your cool example ideas!

@anschaef

This comment has been minimized.

Copy link
Owner Author

anschaef commented Jul 22, 2019

Updated to Bootstrap v4.3.x today

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.