Button Doesn't Cover Whole Line in Bootstrap-CodePudding

The btn-block style that I use in Bootstrap for the button to occupy the entire line is not applied. What should I do?

<button type="submit" >Save</button>

CodePudding user response：

You are probably trying to use a feature in Bootstrap 5 that used to be in Bootstrap 4. If you are using Bootstrap 5, use the following code to render a button that covers the entire row:

<div >
  <button  type="button">Button</button>
  <button  type="button">Button</button>
</div>

Refer to the documentation for the button styles used in Bootstrap 5.

CodePudding user response：

In Bootstrap5, dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed.

<div >
  <button  type="button">Button</button>
  <button  type="button">Button</button>
</div>

d-grid means display: grid and gap-2, this can save on having to add margin utilities to individual grid items (children of a display: grid container).

This link is a description of this example, and for more information about gap-* you can read this article.

Read more about changes in Bootstrap5 in this link ( especially in your case, read Buttons ).

Good luck.