@import 'bootstrap';

@for $i from 0 through 100 {
  .mt#{$i} { margin-top: #{$i}px !important; }
  .mb#{$i} { margin-bottom: #{$i}px !important; }
  .ml#{$i} { margin-left: #{$i}px !important; }
  .mr#{$i} { margin-right: #{$i}px !important; }
  .m#{$i}  { margin: #{$i}px !important; }

  .pt#{$i} { padding-top: #{$i}px !important; }
  .pb#{$i} { padding-bottom: #{$i}px !important; }
  .pl#{$i} { padding-left: #{$i}px !important; }
  .pr#{$i} { padding-right: #{$i}px !important; }
  .p#{$i}  { padding: #{$i}px !important; }

  @media (min-width: $screen-xs-min) {
    .mt#{$i}-xs { margin-top: #{$i}px !important; }
    .mb#{$i}-xs { margin-bottom: #{$i}px !important; }
    .ml#{$i}-xs { margin-left: #{$i}px !important; }
    .mr#{$i}-xs { margin-right: #{$i}px !important; }
    .m#{$i}-xs  { margin: #{$i}px !important; }

    .pt#{$i}-xs { padding-top: #{$i}px !important; }
    .pb#{$i}-xs { padding-bottom: #{$i}px !important; }
    .pl#{$i}-xs { padding-left: #{$i}px !important; }
    .pr#{$i}-xs { padding-right: #{$i}px !important; }
    .p#{$i}-xs  { padding: #{$i}px !important; }
  }

  @media (min-width: $screen-sm-min) {
    .mt#{$i}-sm { margin-top: #{$i}px !important; }
    .mb#{$i}-sm { margin-bottom: #{$i}px !important; }
    .ml#{$i}-sm { margin-left: #{$i}px !important; }
    .mr#{$i}-sm { margin-right: #{$i}px !important; }
    .m#{$i}-sm  { margin: #{$i}px !important; }

    .pt#{$i}-sm { padding-top: #{$i}px !important; }
    .pb#{$i}-sm { padding-bottom: #{$i}px !important; }
    .pl#{$i}-sm { padding-left: #{$i}px !important; }
    .pr#{$i}-sm { padding-right: #{$i}px !important; }
    .p#{$i}-sm  { padding: #{$i}px !important; }
  }

  @media (min-width: $screen-md-min) {
    .mt#{$i}-md { margin-top: #{$i}px !important; }
    .mb#{$i}-md { margin-bottom: #{$i}px !important; }
    .ml#{$i}-md { margin-left: #{$i}px !important; }
    .mr#{$i}-md { margin-right: #{$i}px !important; }
    .m#{$i}-md  { margin: #{$i}px !important; }

    .pt#{$i}-md { padding-top: #{$i}px !important; }
    .pb#{$i}-md { padding-bottom: #{$i}px !important; }
    .pl#{$i}-md { padding-left: #{$i}px !important; }
    .pr#{$i}-md { padding-right: #{$i}px !important; }
    .p#{$i}-md  { padding: #{$i}px !important; }
  }

  @media (min-width: $screen-lg-min) {
    .mt#{$i}-lg { margin-top: #{$i}px !important; }
    .mb#{$i}-lg { margin-bottom: #{$i}px !important; }
    .ml#{$i}-lg { margin-left: #{$i}px !important; }
    .mr#{$i}-lg { margin-right: #{$i}px !important; }
    .m#{$i}-lg  { margin: #{$i}px !important; }

    .pt#{$i}-lg { padding-top: #{$i}px !important; }
    .pb#{$i}-lg { padding-bottom: #{$i}px !important; }
    .pl#{$i}-lg { padding-left: #{$i}px !important; }
    .pr#{$i}-lg { padding-right: #{$i}px !important; }
    .p#{$i}-lg  { padding: #{$i}px !important; }
  }
}