Bootstrap 5 Buttons Block buttons

Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes.

Block buttons used Classes:

• .d-flex: This class is used to display an element as a block-level flex container.
• .d-block: This class is used to display an element as a block-level element (like <p>).

Syntax:

<div class="d-grid gap-*">
 <button class="btn btn-*" type="button">
 Button
 </button>
 ...
</div>

Example 1: This example shows the working of a block-level button in Bootstrap 5.

Output:

Example 2: This example shows the working of a block-level button in Bootstrap 5.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons