Close Button is one of the components of Bootstrap 5, the developers preferably use this component to close the alerts or dismiss the contents like modals. This component provides an option to either close the content using an attribute  .btn-close. You can modify these components using customizable styling or default parameters. Additionally, you add on different ways of styling to get clear. 

 

For instance,

 

<button type="button" class="btn-close"></button>

 

 

Disabled state

To make button disable mode

Further variants that are included in this component are the Disabled state. The disabled buttons are added with a change button opacity. The additional parameters that can be added in the class are pointer events, none, and user-select. 

pointer-events: none and user-select: none to prevent hover effects.

For instance,

 

<button type="button" class="btn-close" disabled></button>

 

If there’s any background image, to make the close button visible you can add a white variant. This white variant can be added using a change filter property. The change can be done using .btn-close to .btn-close-white. 

 

For instance,

 

<button type="button" class="btn-close btn-close-white"></button>

<button type="button" class="btn-close btn-close-white"></button>

 

Subscribe For Daily Updates