Question 44893 in Html Question posted in
Some basic documentation can be found here.

I am unable to change the color of a bootstrap button to close a modal – Html

I am trying to change the color of my bootstrap close button, but it seems like I am unable to change the color of the "x"

Initially I thought no CSS was being applied to the m-close class, but after changing it from color to background-color, the background of the button was changed to white, while the "x" still remained black.

<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="modalContact" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="row d-flex justify-content-center align-items-center">
       <div class="card bg-dark text-white" style="border-radius: 1.3rem;">
         <div class="modal-header">
           <button type="button" class="btn-close m-close" data-bs-dismiss="modal" aria-label="Close">

           </button>
         </div>...

.m-close {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}

jsfiddle: https://jsfiddle.net/rb2gk3u9/1/

Tags:

2

Answers


  1. 0

    Icon X in Bootstrap .btn-close is a background-image using SVG data URI, so you can change it using color in CSS.

    If you want to change X icon to white, there is a Bootstrap class name for that. Just add class btn-close-white to that close button like this

    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
</button>
    Login or Signup to reply.
  2. 0

    The answer given by @Ashar is correct, you weren’t able to change it becaus the icon inside of it isn’t a phisical element, but an svg background-image, so there’s no way (at least that i know) to "directly affecting" background images within css, except for one property, which are filters.

    the .btn-close-white applies an "invert" filter which will make the trick, but is not going to be a pure brilliant white.

    Better would be to put a real icon inside the button and hiding te background image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search