aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--scss/_close.scss4
-rw-r--r--scss/_toasts.scss5
-rw-r--r--scss/_variables.scss2
-rw-r--r--site/content/docs/5.0/components/close-button.md21
-rw-r--r--site/content/docs/5.0/components/toasts.md54
-rw-r--r--site/content/docs/5.0/migration.md1
6 files changed, 44 insertions, 43 deletions
diff --git a/scss/_close.scss b/scss/_close.scss
index 037df1666..35bdc3560 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -35,3 +35,7 @@
opacity: $btn-close-disabled-opacity;
}
}
+
+.btn-close-white {
+ filter: invert(1);
+}
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 4db51b6b0..e2b98e600 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -36,6 +36,11 @@
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+
+ .btn-close {
+ margin-right: $toast-padding-x / -2;
+ margin-left: $toast-padding-x;
+ }
}
.toast-body {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 84a1f4abc..abd2d8d93 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1071,7 +1071,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default
$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
-$toast-padding-y: .25rem !default;
+$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
index 1a83d7a96..ba4d17bdc 100644
--- a/site/content/docs/5.0/components/close-button.md
+++ b/site/content/docs/5.0/components/close-button.md
@@ -3,11 +3,30 @@ layout: docs
title: Close button
description: A generic close button for dismissing content like modals and alerts.
group: components
+toc: true
---
-**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering.
+## Example
+
+Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{{< example >}}
<button type="button" class="btn-close" aria-label="Close"></button>
+{{< /example >}}
+
+## Disabled state
+
+Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
+
+{{< example >}}
<button type="button" class="btn-close" disabled aria-label="Close"></button>
{{< /example >}}
+
+## White variant
+
+Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `backdrop-filter` property to invert the `background-image`.
+
+{{< example class="bg-dark" >}}
+<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
+<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
+{{< /example >}}
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index ee8eba458..06d4fa37e 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -34,9 +34,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -54,9 +52,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -74,9 +70,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
@@ -88,9 +82,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
@@ -103,16 +95,11 @@ When you have multiple toasts, we default to vertically stacking them in a reada
Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
{{< example class="bg-light" >}}
-<div class="toast d-flex" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
- <button type="button" class="ml-auto p-2 close" data-dismiss="toast" aria-label="Close">
- <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/>
- <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
- </svg>
- </button>
+ <button type="button" class="btn-close ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -135,16 +122,11 @@ Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< example class="bg-light" >}}
-<div class="toast d-flex text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
- <button type="button" class="ml-auto p-2 close text-white" data-dismiss="toast" aria-label="Close">
- <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/>
- <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
- </svg>
- </button>
+ <button type="button" class="btn-close btn-close-white ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -159,9 +141,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -183,9 +163,7 @@ For systems that generate more notifications, consider using a wrapping element
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
@@ -197,9 +175,7 @@ For systems that generate more notifications, consider using a wrapping element
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
@@ -221,9 +197,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -256,9 +230,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
- <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
+ <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 01f33d444..91cfb456d 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -53,6 +53,7 @@ toc: true
- Renamed `.close` to `.btn-close` for a less generic name.
- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
- Added new variables to better control the customization.
+- Added new `.btn-close-white` variant that uses `backdrop-filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
#### Navs
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 07:40:44 +0000