Change color of modal close button from dark to light in Bootstrap 5

Tips and Tricks
#1

I recently created a Bootstrap 5 modal and gave it a dark background, which resulted in a problem… the default close button is black.

The Bootstrap 5 modal uses an SVG background image for the “X” close button (unlike Bootstrap 4, which used a font.) Changing the color of the close button in Bootstrap 4 was easily done by changing the color: rule on the .close class.

I was about to make a new light SVG “X” when I read that Bootstrap 5 added a btn-close-white utility class which changes the standard dark SVG “X” from black to white. All you have to do is highlight the button in the HTML, and then you can add the class in the Attributes panel.

Maybe the devs might want to add this as an toggleable option in the UI in a future release? @martin

1 Like
#2

Thanks for the tip! We will add it as an option in our next updates.