Bootstrap 4 applying responsiveness to position on elements depending on device size with bootstrap

user_13846802 0
Viewed 4169

I use bootstrap4 to create a mobile first responsive layout with elements with different positions and have various rows and columns set up that I adjust for the different categories of screen size.

I am wondering if there are pure bootstrap styling classes that would allow me to apply and remove position (absolute, fixed, relative) for the different sizes, without having to create my own css media queries.

For example, if I wanted to have a container that on mobile becomes fixed and on desktop becomes absolute only on medium size screen...

<div id="back-to-top" class="position-fixed position-sm-absolute position-md-relative">
    <a href="#">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

I'm also using the wordpress with css so can't get into the sass easily. Any suggestions?

responsive-design bootstrap-4 media-queries css html
3 Answers

For anyone who comes across this at a later date. These are the two arrays needed to make the loop function. (and yes, works for both BS-4 & BS-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,
);

No, unfortunately there are no original bootstrap media classes for apply and remove position. Own rules are needed to override originals Bootstrap 4 classes definitions of position. Same issue here.

https://getbootstrap.com/

to enable this functionality here is the code snippet for SCSS:

@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 compiled version for CSS:

@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;
  }
}
user_56771770

Based on @Max Kaps's answer, I tested with BS5 and it is working as well.

@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;
  }
}
user_162419810

Based on @Max Kaps's answer, If you're using SCSS, you should also add the $positions variable!

$positions: (
    fixed,
    absolute,
    relative,
    sticky,
    static
);

user_149917980
Related