Skip to content

Wrap alert text content in <p> to fix flex gap issue and improve semantics #42175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 2 commits into from
Mar 21, 2026
+21 −19
Merged

Wrap alert text content in <p> to fix flex gap issue and improve semantics #42175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92a5b33
Wrap alert text content in `<p>` to fix flex gap issue and improve se…
julien-deramond Mar 13, 2026
3413842
bump
mdo Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
"maxSize": "14.0 kB"
"maxSize": "14.25 kB"
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "43.0 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "39.5 kB"
"maxSize": "40.0 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
Expand Down
4 changes: 2 additions & 2 deletions js/tests/visual/alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>

<div class="alert theme-warning alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<p><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>

<div class="alert theme-danger alert-dismissible fade show" role="alert">
Expand All @@ -39,7 +39,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>

<div class="alert theme-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
This alert will take 5 seconds to fade out.
<p>This alert will take 5 seconds to fade out.</p>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions scss/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ $alert-tokens: defaults(
@include border-radius(var(--alert-border-radius));
}

.alert > p {
Copy link
Member Author

@julien-deramond julien-deramond Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also use .mb-0 in code snippets.

Copy link

@pricop pricop Mar 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 in favor of .mb-0 for the docs, if this is how it's used in other areas. It's very explicit and can be easly removed.

That way, if someone prefers something like margin: 1rem for all their p elements (this could be done to decorate paragraphs in a certain way), it won't be affected by the .alert > p rule, which in the case of this commit, only resets the bottom margin.

margin-bottom: 0;
}

.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/cheatsheet/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,7 +652,7 @@ export const body_class = 'bg-body-tertiary'
<div>
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
<div class="alert theme-${themeColor.name} alert-dismissible fade show mb-3" role="alert">
A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`)} />
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/partials/snippets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default () => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert theme-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
` <p>${message}</p>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
Expand Down
12 changes: 5 additions & 7 deletions site/src/content/docs/components/alert.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ 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).

<Example code={`<div class="alert" role="alert">
A simple alert—check it out!
<p>A simple alert—check it out!</p>
</div>`} />

## Variants

Use any of our variant theme classes for color mode adaptive, contextual styling.

<Example class="vstack gap-3" code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
A simple ${themeColor.name} alert—check it out!
<p>A simple ${themeColor.name} alert—check it out!</p>
</div>`)} />

<Details name="warning-color-assistive-technologies" />
Expand All @@ -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.

<Example class="vstack gap-3" code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
</div>`)} />

## Additional content
Expand All @@ -66,9 +66,7 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo
<svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
<p>An example alert with an icon</p>
</div>`} />

## Dismiss
Expand All @@ -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:

<Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
Something’s wrong, check the fields below and try again.
<p>Something’s wrong, check the fields below and try again.</p>
<CloseButton dismiss="alert" class="ms-auto" />
</div>`} />

Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/components/offcanvas.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo

<Example code={`<button class="btn-solid theme-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
<div class="alert theme-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
<div class="alert theme-info d-none d-lg-block"><p>Resize your browser to show the responsive offcanvas toggle.</p></div>
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
<div class="offcanvas-header">
Expand Down
10 changes: 5 additions & 5 deletions site/src/content/docs/customize/theme.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ Here's the same set of components rendered in both light and dark modes side by
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="alert theme-primary">This is a primary alert.</div>
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
<input type="text" class="form-control" placeholder="Form control">
<div class="checkgroup">
<div class="check">
Expand All @@ -236,7 +236,7 @@ Here's the same set of components rendered in both light and dark modes side by
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="alert theme-primary">This is a primary alert.</div>
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
<input type="text" class="form-control" placeholder="Form control">
<div class="checkgroup">
<div class="check">
Expand Down Expand Up @@ -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.

<Example class="vstack gap-3" code={`<div class="alert theme-primary">Primary alert</div>
<Example class="vstack gap-3" code={`<div class="alert theme-primary"><p>Primary alert</p></div>
<div>
<button type="button" class="btn-solid theme-primary">Primary button</button>
<button type="button" class="btn-outline theme-primary">Primary outline button</button>
Expand All @@ -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.

<Example code={`<div class="vstack gap-3 theme-primary">
<div class="alert">Primary alert</div>
<div class="alert"><p>Primary alert</p></div>
<div>
<button type="button" class="btn-solid">Primary button</button>
<button type="button" class="btn-outline">Primary outline button</button>
Expand All @@ -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.

<Example code={`<div class="vstack gap-3 theme-primary">
<div class="alert">Primary alert</div>
<div class="alert"><p>Primary alert</p></div>
<div>
<button type="button" class="btn-solid theme-emphasis">Emphasis button</button>
<button type="button" class="btn-outline">Primary outline button</button>
Expand Down
Loading