Button Doesn't Cover Whole Line in Bootstrap

user_14901006 0
Viewed 262

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" class="btn btn-primary btn-lg btn-block">Save</button>
css html
2 Answers

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 class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

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

user_150326880

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 class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" 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.

user_110804850
Related