CODEWITHSUNDEEP
cssbootstrap-5
ericgio
ericgio

Reputation: 3499

Bootstrap 5 Close Button: Easy way to change color?

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!

Upvotes: 14

Views: 12981

Answers (4)

tr303808
tr303808

Reputation: 351

Warning: this approach has been deprecated since Bootstrap 5.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>

Upvotes: 8

Evans Sarpong
Evans Sarpong

Reputation: 41

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

Upvotes: 0

user2162298
user2162298

Reputation: 110

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

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 5

Related Questions