How can I apply Bootstrap position classes on specific screen sizes?

Question

I have this HTML element with Bootstrap5 utility classes for position:

<div class="position-absolute bottom-0 w-100 text-center mb-2">
  Content
</div>

I need to remove the class position-absolute on the mobile screen using bootstrap utilities

Answer 1

Bootstrap position classes are not responsive (except for sticky). You'll need to create your own custom class. You may be able to use breakpoint mixins to automatically get the breakpoint sizes:

@include media-breakpoint-only(xs) {
    .position-xs-only-absolute {
        position: absolute;
    } 
}

Otherwise, use standard media queries which correspond to Bootstrap's breakpoints.

@media (max-width: 575px) {
    .position-xs-only-absolute {
        position: absolute;
    } 
}