Feature request: add responsive btn-group-vertical classes

[Rabadash8820]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Add responsive btn-group-* and/or btn-group-*-vertical classes, that cause a btn-group to appear vertical or horizontal at the specified breakpoints (sm, md, etc.).

Motivation and context

btn-group is a handy component for visually/connecting multiple buttons. However, if there are lots of buttons with text (especially when using btn-group-lg), then the buttons will be awkwardly squished together.

For example, here is a 3-button group on a widescreen laptop:

and again on a mobile screen:

btn-group-vertical looks much nicer on mobile, but leads to a lot of unnecessary surrounding whitespace on widescreen:

This SO answer with over 70 upvotes suggests using btn-group flex-wrap. However, this makes the button corners look weird on mobile without several additional border-radius-* utilities:

I could also use block buttons, but they lack the nice connected borders of a button group.

Long story short, if I could just put btn-group-vertical btn-group-md on my button groups so that they start vertical on mobile and then expand to horizontal on md breakpoints and above, it would make everything so much easier.

Edit: I know the proposed classes would conflict with the existing btn-group-lg and btn-group-sm classes for sizing... I don't have a great solution to suggest for that, other than making a breaking change or introducing more verbose classes like btn-group-sm-horizontal.

[Rabadash8820]

@mdo I realize that this Issue is old and relatively unnoticed by the community, but I'd like to argue that it is still an Issue that should be fixed eventually. The current behavior is rather poor for responsive button groups with many buttons. I request re-opening this one . 🙏