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

2 Likes
2

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

3

Giving this a bump as it doesn’t seem to have ever made it into any of the recent updates.

4

Its in the options on 6.2.1 under Close Options > Color

5

That option only shows up if you’re using the dedicated Close component. If you’re working with a Bootstrap Modal, the close button is part of the header, but doesn’t show up in the Overview panel, and thus it has no selectable options through the UI.

The only way you can select it is through the HTML. Then you can add the btn-close-white class via the Attributes panel.

My suggestion was that it should be made an option under the Modal Options.

6

I would agree for the component switch its a great addition.

However, Bootstrap Studio had better rethink locked components and handy switchs because with the new convert parse custom code to componets ability they have added and mass import of html, css, and javascript, I foresee a clash between the designers ease of the ui and the simple input or import of universal Bootstrap code by developers coming available in Bootstrap 5.3 and beyond (light dark sub component styling) is about to occur. Might it be time to relax on the switch and concentrate more on the user adding there own custom options ? I mean you can actually add the button switch yourself… right ?

7

I was reading the Bootstrap 5.3 documents (upcoming) and it looks like btn-close-white is going to be deprecated.

Instead data-bs-theme=“dark” will be used to invert the background svg image using the filter property without overriding its value. :heavy_multiplication_x:

8

Interesting. Frankly, I’m not thrilled when CSS frameworks start to make UI choices for us based on what they think looks best. But as long as we can override the stock settings, I guess it’s not a big deal.