8

With the release of v5, Bootstrap has updated the styling of several components, including the close button. Before v5, the "x" was text that could be easily styled, including inheriting color from a parent. Now however, the button is styled using a background SVG image:

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
}

In terms of adjusting the color, there's a .btn-close-white variant that inverts the color using a CSS filter, but I want a specific color. When including the raw SCSS files, you can update the $btn-close-color variable to change the color. However, I'm using Bootstrap in an environment where we include the CSS as a stylesheet link, so I can't update the SCSS.

I'd like to easily change the color of the "X", ideally in a relatively flexible way like before where color can be inherited. Some answers I've found suggest that the background image cannot be styled with CSS. I've tried using CSS filters, but have found it pretty difficult to specify a specific color. Are there any other approaches I can use? Thanks!

ericgio
  • 3,094
  • 4
  • 25
  • 44
  • 1
    How about ditching the background image and instead introducing a character as content on a pseudo element? – A Haworth May 19 '21 at 09:26
  • 1
    Sure, I could do that but then I'm basically just bypassing Bootstrap and creating my own component. I was hoping there might be a way to work with the Bootstrap files but modify the image color. – ericgio May 19 '21 at 20:40

4 Answers4

4

You could either use a tool like this to create a specific color filter, OR change the fill color in the SVG...


.btn-close-yellow {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fc0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
3

Not sure if this was answered but per Bootstrap try this:

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

mlamanna
  • 141
  • 2
  • 10
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 23 '22 at 17:39
2

Depending on the way you're using Bootstrap, you could go and directly change the variable, $btn-close-color: $primary (for example)

Or, if you want to be able to write something like, btn-close-primary in the html, you can make a mixin.

    @mixin button-close-color($color) {
     $btn-close-bg:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
     background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat;
    }

Then loop through the theme

@each $color, $value in $theme-colors {
  .btn-close-#{$color} {
    @include button-close-color($value);
  }
}
user2162298
  • 110
  • 6
0

background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fc0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; }

Evans Sarpong
  • 31
  • 1