The .btn class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. The most basic button is the .btn-default variant.
Loading state can also be combined with all kind of buttons, including icons.
Layout
Block buttons
Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-sm utility. Resize your browser to see them change.
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width « block button », use .col-6. Center it horizontally with .mx-auto, too.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked.