how to use btn block in bootstrap 5

Hello developer, Today in this sort tutorial we will see why bootstrap 5 btn-block not working. How to use block full width button in bootstrap 5. there is two way you can use full width button first is used d-grid & second is w-100. let see both example.

Why bootstrap 5 not working .btn-block

In bootstrap 4 you can use .btn-block class to create full width button. but bootstrap 5 doesn't include .btn-block css class,

.btn-block { 
  display: block; 
  width: 100%; 
} 

Block buttons using grid

Why you should use d-grid because it support gap class

<div class="d-grid">
  <button class="btn btn-primary" type="button">Button</button>
</div>

Bootstrap 5 ,btn block

block button d-grid with gap class

<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>

bootstrap 5 btn-block working

Block buttons using width class

You can use width size class to create full width block button.

<button class="btn w-100 btn-primary" type="button">Button w-100</button>