Alerts
Alerts give short, contextual feedback: confirmations, warnings, errors and announcements. Pick a colour that matches the meaning, add icons, links or actions, and make them dismissible with a close button and data-ui-dismiss="alert".
1Contextual colours
Eight colour variants to match the meaning of the message.
A primary alert: This honest story turns you focused on what matters for teams of every size.
A secondary alert: Our physiotherapy gives your work organised all year round.
A success alert: The new family plans turns complex tasks into simple steps without the usual hassle.
A danger alert: A focused story brings complex tasks into simple steps at a fair price.
A warning alert: This practical project lets you focused on what matters all year round.
A info alert: Our telehealth makes you focused on what matters on any device.
A light alert: The new certified specialists keeps decisions quicker and clearer in just a few clicks.
A dark alert: The new same-day appointments gives decisions quicker and clearer wherever you are.
<div class="alert alert-primary" role="alert">
A primary alert: This honest story turns you focused on what matters for teams of every size.
</div>
<div class="alert alert-secondary" role="alert">
A secondary alert: Our physiotherapy gives your work organised all year round.
</div>
<div class="alert alert-success" role="alert">
A success alert: The new family plans turns complex tasks into simple steps without the usual hassle.
</div>
<div class="alert alert-danger" role="alert">
A danger alert: A focused story brings complex tasks into simple steps at a fair price.
</div>
<div class="alert alert-warning" role="alert">
A warning alert: This practical project lets you focused on what matters all year round.
</div>
<div class="alert alert-info" role="alert">
A info alert: Our telehealth makes you focused on what matters on any device.
</div>
<div class="alert alert-light" role="alert">
A light alert: The new certified specialists keeps decisions quicker and clearer in just a few clicks.
</div>
<div class="alert alert-dark" role="alert">
A dark alert: The new same-day appointments gives decisions quicker and clearer wherever you are.
</div>2Alerts with icons
A leading icon makes the type of message clear at a glance.
Your changes were saved.
A new version is available.
Your storage is almost full.
The payment could not be processed.
<div class="alert alert-success d-flex align-items-center gap-2" role="alert">
<i class="bi bi-check-circle-fill" aria-hidden="true"></i>
<div>
Your changes were saved.
</div>
</div>
<div class="alert alert-info d-flex align-items-center gap-2" role="alert">
<i class="bi bi-info-circle-fill" aria-hidden="true"></i>
<div>
A new version is available.
</div>
</div>
<div class="alert alert-warning d-flex align-items-center gap-2" role="alert">
<i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
<div>
Your storage is almost full.
</div>
</div>
<div class="alert alert-danger d-flex align-items-center gap-2 mb-0" role="alert">
<i class="bi bi-x-octagon-fill" aria-hidden="true"></i>
<div>
The payment could not be processed.
</div>
</div>3Dismissible alerts
Add .alert-dismissible, .fade .show and a close button with data-ui-dismiss="alert".
Heads up! A smart dashboard makes the whole team on the same page for teams of every size.
The new family plans gives customers coming back without the usual hassle.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Heads up!</strong> A smart dashboard makes the whole team on the same page for teams of every size.
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-primary alert-dismissible fade show mb-0" role="alert">
The new family plans gives customers coming back without the usual hassle.
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>4Heading and divider
Longer messages with an alert heading, paragraphs and a horizontal rule.
Goal reached!
The new online results keeps your work organised without the usual hassle. The new family plans connects results you can measure at a fair price.
Next milestone: Nov 15, 2026
<div class="alert alert-success mb-0" role="alert">
<h4 class="alert-heading"><i class="bi bi-trophy-fill" aria-hidden="true"></i> Goal reached!</h4>
<p>The new online results keeps your work organised without the usual hassle. The new family plans connects results you can measure at a fair price.</p>
<hr>
<p class="mb-0 small">Next milestone: Nov 15, 2026</p>
</div>5Alert links
Use .alert-link so links pick up a matching, bolder colour.
Read the release notes to see what changed.
Your card expires soon. Update billing details.
<div class="alert alert-info" role="alert">
Read the <a href="#" class="alert-link">release notes</a> to see what changed.
</div>
<div class="alert alert-danger mb-0" role="alert">
Your card expires soon. <a href="#" class="alert-link">Update billing details</a>.
</div>6Alert with actions
Buttons inside the alert let people act on the message directly.
Meeting invitation
Mason Nguyen invited you to a call on Oct 31, 2026 at 07:45.
<div class="alert alert-primary d-flex flex-column flex-sm-row align-items-sm-center gap-3 mb-0" role="alert">
<div class="fs-3">
<i class="bi bi-calendar-check-fill" aria-hidden="true"></i>
</div>
<div class="flex-grow-1">
<strong>Meeting invitation</strong>
<div class="small">
Mason Nguyen invited you to a call on Oct 31, 2026 at 07:45.
</div>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-primary btn-sm">Accept</button>
<button type="button" class="btn btn-outline-primary btn-sm">Decline</button>
</div>
</div>7Compact alerts
Less padding and small text for inline hints next to forms.
Tip: drag rows to change their order.
Last synced just now.
<div class="alert alert-secondary py-2 px-3 small mb-2" role="alert">
<i class="bi bi-lightbulb-fill" aria-hidden="true"></i> Tip: drag rows to change their order.
</div>
<div class="alert alert-warning py-2 px-3 small mb-0" role="alert">
<i class="bi bi-clock-history" aria-hidden="true"></i> Last synced just now.
</div>8Alert with a list
List the details of a problem inside a single alert.
Import finished with warnings
- 6 rows skipped: missing email address
- 3 duplicate records merged
- Dates in column D were read as text
<div class="alert alert-warning mb-0" role="alert">
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Import finished with warnings</h5>
<ul class="mb-0">
<li>6 rows skipped: missing email address</li>
<li>3 duplicate records merged</li>
<li>Dates in column D were read as text</li>
</ul>
</div>9Accent border alerts
A light surface with a thick coloured left border, a calm style for docs and dashboards.
Note
The new reminders guides data easy to understand wherever you are.
Success
Our physiotherapy shows you focused on what matters without extra tools.
Important
A focused goal guides the whole team on the same page from the very first day.
<div class="alert ca-alert-accent border-primary" role="alert">
<strong class="text-primary">Note</strong>
<div>
The new reminders guides data easy to understand wherever you are.
</div>
</div>
<div class="alert ca-alert-accent border-success" role="alert">
<strong class="text-success">Success</strong>
<div>
Our physiotherapy shows you focused on what matters without extra tools.
</div>
</div>
<div class="alert ca-alert-accent border-danger mb-0" role="alert">
<strong class="text-danger">Important</strong>
<div>
A focused goal guides the whole team on the same page from the very first day.
</div>
</div>10Upload progress
An alert that carries a progress bar while a long task runs.
Uploading clear-ways-to-improve-your-journey.zip45%
<div class="alert alert-light border mb-0" role="status">
<div class="d-flex justify-content-between mb-2">
<span><i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i> Uploading <strong>clear-ways-to-improve-your-journey.zip</strong></span><span class="small text-body-secondary">45%</span>
</div>
<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 8px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 45%;">
</div>
</div>
</div>11Message with avatar
A personal message alert with the sender's photo and a reply link.
Maya Ortega 17 hours ago
The new same-day appointments brings you focused on what matters from the very first day.
Reply<div class="alert alert-light border d-flex gap-3 mb-0" role="alert">
<img src="../assets/img/avatar-5.svg" alt="Maya Ortega" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Maya Ortega <span class="small text-body-secondary fw-normal">17 hours ago</span>
</div>
<div>
The new same-day appointments brings you focused on what matters from the very first day.
</div>
<a href="#" class="alert-link small">Reply</a>
</div>
</div>12Cookie banner
A dark dismissible banner with two choices; both buttons close it through the data API.
We use cookies to remember your settings and understand how the site is used.
<div class="alert text-bg-dark border-0 alert-dismissible fade show d-flex flex-column flex-md-row align-items-md-center gap-3 mb-0" role="alert" data-ui-theme="dark">
<div class="fs-4">
<i class="bi bi-cookie" aria-hidden="true"></i>
</div>
<div class="flex-grow-1 small">
We use cookies to remember your settings and understand how the site is used.
</div>
<div class="d-flex gap-2 me-md-4">
<button type="button" class="btn btn-light btn-sm text-nowrap" data-ui-dismiss="alert">Accept all</button>
<button type="button" class="btn btn-outline-light btn-sm text-nowrap" data-ui-dismiss="alert">Essential only</button>
</div>
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>13Form error summary
Collect validation errors at the top of a form, each linking to its field.
<div class="alert alert-danger mb-0" role="alert" aria-live="assertive">
<div class="fw-semibold mb-1">
<i class="bi bi-x-circle-fill" aria-hidden="true"></i> Please fix 3 problems
</div>
<ul class="mb-0 small">
<li><a href="#" class="alert-link">Email</a> must be a valid address</li>
<li><a href="#" class="alert-link">Password</a> needs at least 8 characters</li>
<li><a href="#" class="alert-link">Terms</a> must be accepted</li>
</ul>
</div>14Maintenance notice
A full-width, square-cornered banner for site-wide announcements.
Scheduled maintenance on Dec 15, 2026 from 02:00 to 04:00 UTC. Details
<div class="alert alert-warning rounded-0 border-0 border-bottom border-warning-subtle text-center mb-0 py-2" role="alert">
<i class="bi bi-tools" aria-hidden="true"></i> Scheduled maintenance on <strong>Dec 15, 2026</strong> from 02:00 to 04:00 UTC. <a href="#" class="alert-link">Details</a>
</div>15System status card
Several small alerts inside a card report the state of each service.
System statusUpdated yesterday
APIOperational
DatabaseOperational
Email deliveryDegraded
<div class="card" style="max-width: 480px;">
<div class="card-header d-flex justify-content-between">
<span class="fw-semibold">System status</span><span class="small text-body-secondary">Updated yesterday</span>
</div>
<div class="card-body">
<div class="alert alert-success py-2 d-flex justify-content-between mb-2" role="alert">
<span><i class="bi bi-server" aria-hidden="true"></i> API</span><span>Operational</span>
</div>
<div class="alert alert-success py-2 d-flex justify-content-between mb-2" role="alert">
<span><i class="bi bi-database-fill" aria-hidden="true"></i> Database</span><span>Operational</span>
</div>
<div class="alert alert-warning py-2 d-flex justify-content-between mb-0" role="alert">
<span><i class="bi bi-envelope-fill" aria-hidden="true"></i> Email delivery</span><span>Degraded</span>
</div>
</div>
</div>16Processing alert
A spinner shows that something is happening in the background.
Generating your report. This usually takes under a minute.
<div class="alert alert-info d-flex align-items-center gap-3 mb-0" role="status">
<div class="spinner-border spinner-border-sm" aria-hidden="true">
</div>
<div>
Generating your report. This usually takes under a minute.
</div>
</div>17Feature announcement
Badges and an icon turn an alert into a friendly product update.
NewSame-day appointments is now available for every plan. Try it
<div class="alert alert-primary alert-dismissible fade show mb-0" role="alert">
<span class="badge text-bg-primary me-2">New</span><strong>Same-day appointments</strong> is now available for every plan. <a href="#" class="alert-link">Try it <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>18Soft subtle alerts
Subtle background and emphasis text colours give a softer look; pill corners for short notes.
Verified
Awaiting review
Blocked
Beta
<div class="d-flex flex-wrap gap-2">
<div class="alert bg-success-subtle text-success-emphasis border border-success-subtle rounded-pill py-1 px-3 mb-0" role="alert">
<i class="bi bi-check2" aria-hidden="true"></i> Verified
</div>
<div class="alert bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill py-1 px-3 mb-0" role="alert">
<i class="bi bi-hourglass-split" aria-hidden="true"></i> Awaiting review
</div>
<div class="alert bg-danger-subtle text-danger-emphasis border border-danger-subtle rounded-pill py-1 px-3 mb-0" role="alert">
<i class="bi bi-slash-circle-fill" aria-hidden="true"></i> Blocked
</div>
<div class="alert bg-info-subtle text-info-emphasis border border-info-subtle rounded-pill py-1 px-3 mb-0" role="alert">
<i class="bi bi-info-circle-fill" aria-hidden="true"></i> Beta
</div>
</div>19Trial ending
An upgrade prompt with a clear call to action and a way to dismiss it.
Your trial ends in 2 days
Upgrade now to keep your projects and team members.
<div class="alert alert-light border border-primary-subtle alert-dismissible fade show mb-0" role="alert">
<div class="d-flex flex-column flex-sm-row gap-3 align-items-sm-center pe-4">
<div class="flex-grow-1">
<div class="fw-semibold">
<i class="bi bi-hourglass-bottom" aria-hidden="true"></i> Your trial ends in 2 days
</div>
<div class="small text-body-secondary">
Upgrade now to keep your projects and team members.
</div>
</div>
<a href="#" class="btn btn-primary btn-sm text-nowrap">Upgrade plan</a>
</div>
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>20Stacked notifications
Narrow alerts with a shadow, stacked like a notification centre.
Order #TX-2649 was delivered.
Nora Haddad joined your workspace.
Backup failed 4 days ago.
<div class="d-grid gap-2" style="max-width: 360px;">
<div class="alert alert-light shadow-sm border-0 alert-dismissible fade show mb-0 small" role="alert">
<span class="text-success"><i class="bi bi-bag-check-fill" aria-hidden="true"></i></span> Order #TX-2649 was delivered.
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light shadow-sm border-0 alert-dismissible fade show mb-0 small" role="alert">
<span class="text-primary"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span> Nora Haddad joined your workspace.
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light shadow-sm border-0 alert-dismissible fade show mb-0 small" role="alert">
<span class="text-danger"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i></span> Backup failed 4 days ago.
<button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>
</div>