CODEWITHSUNDEEP
csstwitter-bootstrap
Emmanuel P.
Emmanuel P.

Reputation: 1006

Change color of close button in bootstrap modal window

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

Upvotes: 50

Views: 85054

Answers (5)

stromyc
stromyc

Reputation: 659

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>

Update for Bootstrap 5.3

As of v5.3.0, the .btn-close-white class is deprecated. Instead, use data-bs-theme="dark" to change the color mode of the close button.

<div data-bs-theme="dark">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

Source

Upvotes: 24

Saeed Tavakoli
Saeed Tavakoli

Reputation: 27

For Bootstrap 5 you need to add the btn-close-white class

Upvotes: 1

Khairul Islam Tonmoy
Khairul Islam Tonmoy

Reputation: 314

Just Write Down The Code

filter: brightness(0) invert(1);

Upvotes: 7

Asif Raza
Asif Raza

Reputation: 1021

Simple way you can override the defual x button in modal popup

  button.close {
        background: #d73e4d;
        background: rgba(215, 62, 77, 0.75);
        border: 0 none !important;
        color: #fff7cc;
        display: inline-block;
        float: right;
        font-size: 34px;
        height: 40px;
        line-height: 1;
        margin: 0px 1px;
        opacity: 1;
        text-align: center;
        text-shadow: none;
        -webkit-transition: background 0.2s ease-in-out;
        transition: background 0.2s ease-in-out;
        vertical-align: top;
        width: 46px;
    }

enter image description here

Upvotes: 3

Steve Sanders
Steve Sanders

Reputation: 8651

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;
}

Upvotes: 59

Related Questions