Remove btn-block

[ysds]

We can now use our new grid system for responsive full width buttons.

This PR:

• Remove btn-block
• Add examples of button layouts

Closes #30223
Related: #20617, #13647, #21720

https://deploy-preview-30376--twbs-bootstrap.netlify.com/docs/4.3/components/buttons/#layout

[MartijnCuppens]

Pushed some documentation tweaks. Want another approval from @mdo or @andresgalante just to be sure.

[MartijnCuppens]

Maybe wait with this for now. #30380 might unrequire the wrapping divs

[mdo]

Two wrapping <div>s vs a single class feels like unnecessary work to me for folks to create block-level buttons. Should we instead use utilities as the primary method, and then maybe mention grid for layout?

This is enough to get a full-width button:

<button class="btn btn-primary w-100 mb-2">Submit</button>

And you'd add a display utility if block-level is needed, but in most cases I don't think it will be.

Comments

[XhmikosR]

Not sure what to do with this one @mdo?

[mdo]

I think we can revisit this now that we have the latest grid work in there. Without extra markup, we can make stacked buttons with a row parent and a .gy-2. Widths could be further controlled by adding a .col-* class to the .row. Thinking we could flesh this quick proof of context out a bit more and then close this if it works out.

Edit: Downside is responsive behavior isn't really supported here :. The .row > * paddings don't give us gutters between the buttons when using anything less than full-width.

[mdo]

Tried a few things out, and I'm opting for #31995. Closing this out.