Bootstrap 5 Close Button [6 Demos Incl. Custom Close]

What is Close button designed for in Bootstrap 5?

The close button is used with different components to give an option to the user to dismiss the content. These components can be:

• Alerts
• Modals
• Popovers etc.

In this tutorial, we will show you how to use the close button in Bootstrap 5. We will also show you how to include the close button in different components. Also, we will show you adding the functionality of closing the modals and alerts in examples.

A simple example of creating a close button in Bootstrap 5

In the first example, we will only show two simple close buttons without any functionality. To create a close button you just need the following markup:

<button type=”button” class=”btn-close” aria-label=”Close”></button>

That is:

• An element of button type
• Assign a class btn-close
• Use the aria-label=”Close”

The code:

Output:

Creating a white close button for dark backgrounds

So, if your component like alert, modal etc. has a dark background then the above black close button might not be properly visible. You may easily change the color of the close button to white by using .btn-close-white class.

Code:

Create a disabled state close button

For dynamic components, you may want to enable/disable the close option for the user for using the close button. You may change the look of close button to disabled state by using disabled attribute of the button.

It also changes the opacity of the button. Have a look at code below:

How to use close button in alerts example

The following example shows using the close button with the Bootstrap 5 alerts. We have created various color alerts with close buttons each.

Functionality is also added, so if you press the close the in any alert, it will close. See the code and output below:

Online demo and code

How close functionality is added for alert?

Just notice this piece of code in the button tag:

data-bs-dismiss=”alert”

This enables a user to close the alert upon clicking the cross sign.

Using the close button in the modal example

Similarly, you may place the close button in the Bootstrap 5 modals. Just like the alert, we can use the following to enable user to close the modal by the close button:

data-bs-dismiss=”modal”

Have a look at the code and output below.

Output:

This piece of code under the modal-header div in the above example worked for the close button:

<button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”></button>

Customizing the color of the close button

It’s pretty simple if you want to change the color of the close button other than black, and white on dark background.

You simply need to create the CSS for the cross button where you may use the SVG code of color and refer that class in the button markup for the close button.

The example below creates various color close buttons.

 

Reference: https://getbootstrap.com/docs/5.0/components/close-button/