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