.container, .container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@for $i from 1 through 12 {
  .col, .col-auto, .col-sm, .col-sm-auto, .col-md, .col-md-auto, .col-lg, .col-lg-auto, .col-xl, .col-xl-auto, .col-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
}

.col { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
$perc: ('1': 8.333333%, '2': 16.666667%, '3': 25%, '4': 33.333333%, '5': 41.666667%, '6': 50%, '7': 58.333333%, '8': 66.666667%, '9': 75%, '10': 83.333333%, '11': 91.666667%, '12': 100%);

@each $k, $v in $perc {
  .col-#{$k} {
    flex: 0 0 $v;
    max-width: $v;
  }
}

@media (min-width: 576px) {
  .col-sm { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

  @each $k, $v in $perc {
    .col-sm-#{$k} {
      flex: 0 0 $v;
      max-width: $v;
    }
  }
}

@media (min-width: 768px) {
  .col-md { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
  .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

  @each $k, $v in $perc {
    .col-md-#{$k} {
      flex: 0 0 $v;
      max-width: $v;
    }
  }
}

@media (min-width: 992px) {
  .col-lg { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

  @each $k, $v in $perc {
    .col-lg-#{$k} {
      flex: 0 0 $v;
      max-width: $v;
    }
  }
}

@media (min-width: 1200px) {
  .col-xl { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

  @each $k, $v in $perc {
    .col-xl-#{$k} {
      flex: 0 0 $v;
      max-width: $v;
    }
  }
}