Change color of close button in bootstrap modal window

Question

I'm using modal window with boostrap. I've already changed the background and font color, but I did not succed changing the upper right close button to white.

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="modal_button">&times;</span><span class="sr-only">Close</span></button> 

Here's my css attribute

.modal-header {   border-top: 1px solid white;   border-left: 1px solid white;   border-right: 1px solid white;   text-align: left;   font-size: 23px;   color: white;   background-color: #261f31;   border-bottom: 0px; } 

I would like to turn the X button in white

Answer 1

Bootstrap is setting the color like this:

.close {   float: right;   font-size: 21px;   font-weight: 700;   line-height: 1;   color: #000;   text-shadow: 0 1px 0 #fff;   filter: alpha(opacity=20);   opacity: .2; } 

So you can override it with this:

.close {     color: #fff;      opacity: 1; } 

Answer 2

In bootstrap 5 they have a class that allows you to change the color to white for the close button.

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