From 92a5b3341624b736f594d300d587ce85d03ee7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 13 Mar 2026 21:08:16 +0100 Subject: [PATCH 1/2] Wrap alert text content in `

` to fix flex gap issue and improve semantics --- js/tests/visual/alert.html | 4 ++-- scss/_alert.scss | 4 ++++ site/src/assets/examples/cheatsheet/index.astro | 2 +- site/src/assets/partials/snippets.js | 2 +- site/src/content/docs/components/alert.mdx | 12 +++++------- site/src/content/docs/components/offcanvas.mdx | 2 +- site/src/content/docs/customize/theme.mdx | 10 +++++----- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index beaf022c8f56..2ccf43e4106a 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -12,7 +12,7 @@

Alert Bootstrap Visual Test

diff --git a/scss/_alert.scss b/scss/_alert.scss index ee751c2db86e..90723a4d7e90 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -38,6 +38,10 @@ $alert-tokens: defaults( @include border-radius(var(--alert-border-radius)); } + .alert > p { + margin-bottom: 0; + } + .alert-heading { // Specified to prevent conflicts of changing $headings-color color: inherit; diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro index 19387f1dc7cb..f39dc911f454 100644 --- a/site/src/assets/examples/cheatsheet/index.astro +++ b/site/src/assets/examples/cheatsheet/index.astro @@ -652,7 +652,7 @@ export const body_class = 'bg-body-tertiary'
` `)} /> diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js index 9d59e762ae84..112e56ead6a4 100644 --- a/site/src/assets/partials/snippets.js +++ b/site/src/assets/partials/snippets.js @@ -86,7 +86,7 @@ export default () => { const wrapper = document.createElement('div') wrapper.innerHTML = [ `' ].join('') diff --git a/site/src/content/docs/components/alert.mdx b/site/src/content/docs/components/alert.mdx index 7657979b5639..a3c5b682d69f 100644 --- a/site/src/content/docs/components/alert.mdx +++ b/site/src/content/docs/components/alert.mdx @@ -13,7 +13,7 @@ import { getData } from '@libs/data' Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the [alerts JavaScript plugin](#dismiss). - A simple alert—check it out! +

A simple alert—check it out!

`} /> ## Variants @@ -21,7 +21,7 @@ Alerts are available for any length of text, as well as an optional close button Use any of our variant theme classes for color mode adaptive, contextual styling. ``)} />
@@ -42,7 +42,7 @@ We use the following JavaScript to trigger our live alert demo: Use the `.alert-link` utility class to quickly provide matching colored links within any alert. ``)} /> ## Additional content @@ -66,9 +66,7 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo -
- An example alert with an icon -
+

An example alert with an icon

`} /> ## Dismiss @@ -83,7 +81,7 @@ Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. You can see this in action with a live demo: - Something’s wrong, check the fields below and try again. +

Something’s wrong, check the fields below and try again.

`} /> diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx index 7a5d4f61826b..f52d362f80f1 100644 --- a/site/src/content/docs/components/offcanvas.mdx +++ b/site/src/content/docs/components/offcanvas.mdx @@ -169,7 +169,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo Toggle offcanvas -
Resize your browser to show the responsive offcanvas toggle.
+

Resize your browser to show the responsive offcanvas toggle.

diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx index f2f31ce71c95..23ba77f30bc7 100644 --- a/site/src/content/docs/customize/theme.mdx +++ b/site/src/content/docs/customize/theme.mdx @@ -211,7 +211,7 @@ Here's the same set of components rendered in both light and dark modes side by

Some quick example text to build on the card title and make up the bulk of the card's content.

-
This is a primary alert.
+

This is a primary alert.

@@ -236,7 +236,7 @@ Here's the same set of components rendered in both light and dark modes side by

Some quick example text to build on the card title and make up the bulk of the card's content.

-
This is a primary alert.
+

This is a primary alert.

@@ -271,7 +271,7 @@ We generate theme utility classes from the `$theme-colors` Sass map that make al With theme utilities, you can apply a theme color to an element with a single class. -Primary alert
+

Primary alert

@@ -286,7 +286,7 @@ With theme utilities, you can apply a theme color to an element with a single cl And you can apply a theme color utility to a container and any theme-aware children will inherit the theme color. -
Primary alert
+

Primary alert

@@ -302,7 +302,7 @@ And you can apply a theme color utility to a container and any theme-aware child This also means you can override a container's theme color with another theme color on specific components. -
Primary alert
+

Primary alert

From 3413842fc2181ef6784360b3cc10570731d4e2a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 21 Mar 2026 09:10:56 -0700 Subject: [PATCH 2/2] bump --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 112e6092100b..4475aa0d68d4 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "14.0 kB" + "maxSize": "14.25 kB" }, { "path": "./dist/css/bootstrap.css", @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "39.5 kB" + "maxSize": "40.0 kB" }, { "path": "./dist/js/bootstrap.bundle.js",