Skip to content

Instantly share code, notes, and snippets.

@LegitDongo
Last active January 18, 2023 22:52
Show Gist options
  • Save LegitDongo/b847f595e2299bf71d5a1f4a0c5d2412 to your computer and use it in GitHub Desktop.
Save LegitDongo/b847f595e2299bf71d5a1f4a0c5d2412 to your computer and use it in GitHub Desktop.
Bootstrap 4's margin/padding classes. Bootstrap changed their margin/padding right + left classes to start + end, this adds the old ones back to your SCSS file. Be sure to tree-shake!
// Notes
// * If adding alongside Bootstrap 5's margin/padding classes, you'll have to remove some stuff from this file so that there's not duplicate definitions.
// * Check the comments for details
// * XXL sizing was not included in Bootstrap 4, but added here for compatibility
////// remove the following variables if bootstrap is included in your SCSS //////////
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
/////////////////////////
// margin and padding definition; if you're adding directly to Bootstrap 5, remove everything except `pr`, `pl`, `mr`, and `ml`
$space-prefixes: (p : padding, pt : padding-top, pr : padding-right, pb : padding-bottom, pl : padding-left, m : margin, mt : margin-top, mr : margin-right, mb : margin-bottom, ml : margin-left) !default;
@each $breakpoint-name, $breakpoint-value in $grid-breakpoints {
// don't use media queries if regular (ex. `pr-5`)
@if ($breakpoint-value == 0) {
@each $attr-short, $attr-long in $space-prefixes {
@each $name, $value in $spacers {
.#{$attr-short}-#{$name} {
#{$attr-long}: #{$value} !important;
}
}
.#{$attr-short}-auto {
#{$attr-long}: auto !important;
}
}
}
@else {
@media screen and (min-width: $breakpoint-value) {
@each $attr-short, $attr-long in $space-prefixes {
@each $name, $value in $spacers {
.#{$attr-short}-#{$breakpoint-name}-#{$name} {
#{$attr-long}: #{$value} !important;
}
}
.#{$attr-short}-#{$breakpoint-name}-auto {
#{$attr-long}: auto !important;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment