Generalize .navbar-toggleable-* behavior for into .collapse-*

[johnpozy]

Just curious about collapse breakpoints like .collapse-xs, .collapse-sm and .collapse-md. I know the same result can be achieve by using the the .navbar-toggleable-xs and so on. But it doesn't feel right(i think) to use it outside .navbar component.

// Collapse breakpoint
// scss-lint:disable ImportantRule
.collapse-xs,
.collapse-sm,
.collapse-md {
  display: none;
}

.collapse {
  &-xs {
    @include media-breakpoint-up(sm) {
      display: block !important;
    }
  }
  &-sm {
    @include media-breakpoint-up(md) {
      display: block !important;
    }
  }
  &-md {
    @include media-breakpoint-up(lg) {
      display: block !important;
    }
  }
}
// scss-lint:enable ImportantRule

Feel free to close it if this already asked or not relevant.

Thanks

[cvrebert]

Do you know whether any other libraries with collapse/accordion components offer such a feature?

[johnpozy]

@cvrebert I'm not aware of that because all of my app is base on Bootstrap. Here is an example usecase.

It's more cleaner(i think) to use .collapse.collapse-{breakpoint} instead of .collapse.navbar-toggleable-{breakpoint}.

Possible for single collapse. But for accordion, i'm not sure 😕 . If you think this feature will not bring any issue with accordion, it will be a great enhancement for the collapse component.

Thanks

[mdo]

I'll take a look at generalizing the navbar collapse stuff I've built to see if it makes sense to do this.

[mdo]

Not going this route given the more specific nature of these styles coming in #21390.