This now replaces .btn-block with .d-grid and .gap-* utilities. This enables responsive behaviors for the former .btn-block, while also making it much more customizable for responsive behaviors and more.
Moves .btn-block from a .btn modifier class to a parent wrapper, allowing us to more easily manipulate a group of buttons. For folks who want an individual button to be "block level", adding w-100 basically accomplishes that. This now makes it possible for a group of buttons to start off stacked and then go inline once a breakpoint is reached.
Unlike most of our responsive classes, these are built with media-breakpoint-down(), so they use max-width instead of min-width in their media queries. Anecdotally, this fits the pattern of responsiveness for a group of buttons—you stack them on narrow viewports and expand them into a single line when there's available space.
I think I need to take another pass at the copy in the docs still. Beyond that, I'm also considering changing this to .btn-stack or something similar. If we did that, we might be able to backport this to v4 as a new feature in v4.6.0. Thoughts?
Preview: https://deploy-preview-31995--twbs-bootstrap.netlify.app/docs/5.0/components/buttons/#block-buttons