If you happen upon this information in the future, here are the essential arrays required for the loop to function correctly, compatible with both Bootstrap 4 and Bootstrap 5:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$positions: (
static : static,
absolute : absolute,
relative : relative,
fixed : fixed,
sticky : sticky,
);
Regrettably, there are no built-in Bootstrap media classes available to apply or remove positions. Custom rules must be defined to override Bootstrap's default position classes—it's a common challenge faced by developers.
https://getbootstrap.com/
For implementing this functionality, below is the SCSS code snippet:
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Common values
@each $position in $positions {
.position#{$infix}-#{$position} { position: $position !important; }
}
}
}
And here is the compiled CSS version:
@media (min-width: 576px) {
.position-sm-static {
position: static !important;
}
.position-sm-relative {
position: relative !important;
}
.position-sm-absolute {
position: absolute !important;
}
.position-sm-fixed {
position: fixed !important;
}
.position-sm-sticky {
position: sticky !important;
}
}
@media (min-width: 768px) {
.position-md-static {
position: static !important;
}
.position-md-relative {
position: relative !important;
}
.position-md-absolute {
position: absolute !important;
}
.position-md-fixed {
position: fixed !important;
}
.position-md-sticky {
position: sticky !important;
}
}
@media (min-width: 992px) {
.position-lg-static {
position: static !important;
}
.position-lg-relative {
position: relative !important;
}
.position-lg-absolute {
position: absolute !important;
}
.position-lg-fixed {
position: fixed !important;
}
.position-lg-sticky {
position: sticky !important;
}
}
@media (min-width: 1200px) {
.position-xl-static {
position: static !important;
}
.position-xl-relative {
position: relative !important;
}
.position-xl-absolute {
position: absolute !important;
}
.position-xl-fixed {
position: fixed !important;
}
.position-xl-sticky {
position: sticky !important;
}
}