Bootstrap 5Feedback

Bootstrap 5 Inline Alert

An inline alert is a Bootstrap 5 contextual message displayed directly within the page layout, typically adjacent to the content it relates to, rather than in a toast or modal overlay. It uses Bootstrap's .alert class combined with contextual variants like .alert-success, .alert-danger, or .alert-warning to communicate status, validation outcomes, or system feedback. Use inline alerts when the message is directly tied to a specific section of the page, such as a form submission result or a configuration warning inside a settings panel.

Primary Class

.inline-alert

Common Use Cases

→Displaying a 'Password successfully updated' confirmation message directly below an account settings form after the user submits changes
→Showing a 'Your free trial expires in 3 days' warning inside a billing dashboard section so users see it in context without a disruptive modal
→Rendering a 'No results found for your search' informational message inside a product listing container when a filtered query returns zero items
→Presenting a validation error such as 'The email address is already associated with an account' directly above or below the email input field during registration

Variants & Classes

Variant	Description	Classes
Inline Alert Default	Standard inline alert with Bootstrap's default styling.	`inline-alert`
Inline Alert Responsive	Responsive variant that adapts to different screen sizes.	`inline-alert inline-alert-responsive`

Code Example

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Storage almost full.</strong> You are using 4.8 GB of your 5 GB limit. <a href="/upgrade" class="alert-link">Upgrade your plan</a> to avoid losing access to new uploads.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Live Examples

Basic Inline Alert

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated inline alert with custom colours
✓Inline Alert with interactive states
✓Responsive inline alert for all screen sizes

Best Practices

Always include role='alert' for accessibility

Screen readers rely on the role='alert' attribute to announce the message immediately when it appears in the DOM. Skipping it means users with assistive technology may never hear the feedback your alert provides.

Use .alert-link to style anchor tags inside alerts

Bootstrap provides the .alert-link class specifically to make links inside alerts inherit the correct colour for their context variant. Applying it to any anchor tag inside the .alert container keeps the design consistent without custom CSS.

Pair .fade and .show only when the alert appears dynamically

Adding .fade and .show triggers Bootstrap's CSS transition for a smooth appearance, but if the alert is pre-rendered in static HTML, the animation fires on page load rather than on user action, which can feel jarring. Reserve this combination for alerts injected via JavaScript.

Position inline alerts close to the element they describe

An alert about a failed payment should sit inside the billing card or directly above the payment button, not at the top of the page. Proximity between the message and the related UI element reduces the cognitive load on users trying to understand what went wrong.

FAQ

What is the difference between an inline alert and a toast notification in Bootstrap 5?

An inline alert is part of the normal document flow and stays visible until the user dismisses it or the page state changes. It occupies space in the layout and is positioned relative to the content it describes. A Bootstrap toast, by contrast, is an overlay component that auto-dismisses after a timeout and is typically positioned in a corner of the viewport using fixed positioning. Use inline alerts for persistent, context-specific feedback and toasts for brief, non-critical notifications that do not require user action.

How do I create a non-dismissible inline alert with a custom background colour?

Omit the .alert-dismissible class and the close button entirely for a non-dismissible version. For a custom colour, you can override the alert's background and border with utility classes or a custom CSS rule targeting .alert. For example, applying style='background-color:#f0faf0; border-color:#6abf69;' inline gives you a brand-specific green without touching Bootstrap's SCSS. If you are compiling Bootstrap from source, override the $alert-bg-scale and $alert-border-scale Sass variables for consistent theming across all variants.

How does Canvas Builder handle inline alert components during site generation?

Canvas Builder reads the context you provide, such as a form section needing validation feedback or a dashboard widget with a quota warning, and generates the appropriate Bootstrap 5 alert variant with the correct classes, role attribute, and dismiss button already wired up. It maps your brand's primary and accent colours to the nearest semantic alert variant or applies custom inline styles so the alert fits your colour palette out of the box.