what is equivalent zf-each-breakpoint in bootstrap 5?

Question

i was using zf-each-breakpoint in foundation and now want use it in bootstrap

 @include -zf-each-breakpoint {
    // x2 Block grid
    @for $i from 2 through $block-grid-max {
      .#{$-zf-size}-up-#{$i} {
        @include flex-grid-layout($i / 2, '.column.x2');
      }
    }
  }

what is equivalent zf-each-breakpoint in bootstrap 5?

Answer 1

There's no direct equivalent since Bootstrap is built differently.

The breakpoints are all stored in the $grid-breakpoints map:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
)

Which can be iterated over like any SASS map..

@each $breakpoint in map-keys($breakpoints) {
   ...
}