// Alignment per column
- .col-xs-top { align-self: flex-start; }
- .col-xs-center { align-self: center; }
- .col-xs-bottom { align-self: flex-end; }
-
- @include media-breakpoint-up(sm) {
- .col-sm-top { align-self: flex-start; }
- .col-sm-center { align-self: center; }
- .col-sm-bottom { align-self: flex-end; }
- }
- @include media-breakpoint-up(md) {
- .col-md-top { align-self: flex-start; }
- .col-md-center { align-self: center; }
- .col-md-bottom { align-self: flex-end; }
- }
- @include media-breakpoint-up(lg) {
- .col-lg-top { align-self: flex-start; }
- .col-lg-center { align-self: center; }
- .col-lg-bottom { align-self: flex-end; }
- }
- @include media-breakpoint-up(xl) {
- .col-xl-top { align-self: flex-start; }
- .col-xl-center { align-self: center; }
- .col-xl-bottom { align-self: flex-end; }
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ .col-#{$breakpoint}-top { align-self: flex-start; }
+ .col-#{$breakpoint}-center { align-self: center; }
+ .col-#{$breakpoint}-bottom { align-self: flex-end; }
+ }
}
-
}