// Flex
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.flex-fill { flex: 1 1 auto !important; }

// Margin and padding
$spacer: 1rem !default;
$spacers: (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
);

@each $prop, $abbrev in (margin: m, padding: p) {
    @each $size, $length in $spacers {
      .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
      .#{$abbrev}t-#{$size},
      .#{$abbrev}y-#{$size} {
        #{$prop}-top: $length !important;
      }
      .#{$abbrev}r-#{$size},
      .#{$abbrev}x-#{$size} {
        #{$prop}-right: $length !important;
      }
      .#{$abbrev}b-#{$size},
      .#{$abbrev}y-#{$size} {
        #{$prop}-bottom: $length !important;
      }
      .#{$abbrev}l-#{$size},
      .#{$abbrev}x-#{$size} {
        #{$prop}-left: $length !important;
      }
    }
}