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: Friendly people answer your questions quickly, by phone, chat or email.

A secondary alert: Our team has done this many times, so you never have to guess.

A success alert: We keep things simple, so you can focus on what matters to you.

A danger alert: Set up in an afternoon, connect the tools you use and invite your team.

A warning alert: Your data is encrypted, backed up daily and hosted in the region you choose.

A info alert: Start free, upgrade when you grow and cancel any time with one click.

A light alert: Clear prices, honest advice and no surprises along the way.

A dark alert: Every update lands in one place, so nothing gets lost in email threads.

<div class="alert alert-primary" role="alert">
  A primary alert: Friendly people answer your questions quickly, by phone, chat or email.
</div>
<div class="alert alert-secondary" role="alert">
  A secondary alert: Our team has done this many times, so you never have to guess.
</div>
<div class="alert alert-success" role="alert">
  A success alert: We keep things simple, so you can focus on what matters to you.
</div>
<div class="alert alert-danger" role="alert">
  A danger alert: Set up in an afternoon, connect the tools you use and invite your team.
</div>
<div class="alert alert-warning" role="alert">
  A warning alert: Your data is encrypted, backed up daily and hosted in the region you choose.
</div>
<div class="alert alert-info" role="alert">
  A info alert: Start free, upgrade when you grow and cancel any time with one click.
</div>
<div class="alert alert-light" role="alert">
  A light alert: Clear prices, honest advice and no surprises along the way.
</div>
<div class="alert alert-dark" role="alert">
  A dark alert: Every update lands in one place, so nothing gets lost in email threads.
</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 flex 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 flex 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 flex 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 flex 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! Clear reports turn weekly numbers into decisions in minutes, not days.

We measure success by how many customers come back and tell their friends.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> Clear reports turn weekly numbers into decisions in minutes, not days.
  <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">
  We measure success by how many customers come back and tell their friends.
  <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!

Every detail is handled by people who care about getting it right. Thousands of customers already trust us, and we work hard to keep it that way.

Next milestone: Jan 3, 2027

<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>Every detail is handled by people who care about getting it right. Thousands of customers already trust us, and we work hard to keep it that way.</p>
  <hr>
  <p class="mb-0 small">Next milestone: Jan 3, 2027</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

Arjun Carter invited you to a call on Nov 16, 2026 at 18:45.

<div class="alert alert-primary flex flex-col sm:flex-row sm:items-center gap-4 mb-0" role="alert">
  <div class="text-2xl">
    <i class="bi bi-calendar-check-fill" aria-hidden="true"></i>
  </div>
  <div class="grow">
    <strong>Meeting invitation</strong>
    <div class="small">
      Arjun Carter invited you to a call on Nov 16, 2026 at 18:45.
    </div>
  </div>
  <div class="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 25 min ago.

<div class="alert alert-secondary py-2 px-4 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-4 small mb-0" role="alert">
  <i class="bi bi-clock-history" aria-hidden="true"></i> Last synced 25 min ago.
</div>

8Alert with a list

List the details of a problem inside a single alert.

Import finished with warnings

9 rows skipped: missing email address
4 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>9 rows skipped: missing email address</li>
    <li>4 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

Real-time dashboards show what is on track and what needs attention.

Success

We listen first, then build a plan around what you actually need.

Important

Teams report saving around five hours a week after the first month.

<div class="alert ca-alert-accent border-primary" role="alert">
  <strong class="text-primary-ink">Note</strong>
  <div>
    Real-time dashboards show what is on track and what needs attention.
  </div>
</div>
<div class="alert ca-alert-accent border-success" role="alert">
  <strong class="text-success-emphasis">Success</strong>
  <div>
    We listen first, then build a plan around what you actually need.
  </div>
</div>
<div class="alert ca-alert-accent border-danger mb-0" role="alert">
  <strong class="text-danger-emphasis">Important</strong>
  <div>
    Teams report saving around five hours a week after the first month.
  </div>
</div>

10Upload progress

An alert that carries a progress bar while a long task runs.

Uploading how-one-support-team-cut-first-replies-to-20-minutes.zip79%

<div class="alert alert-light border mb-0" role="status">
  <div class="flex justify-between mb-2">
    <span><i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i> Uploading <strong>how-one-support-team-cut-first-replies-to-20-minutes.zip</strong></span><span class="small text-muted">79%</span>
  </div>
  <div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100" style="height: 8px;">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 79%;">
    </div>
  </div>
</div>

11Message with avatar

A personal message alert with the sender's photo and a reply link.

Theo Harlow 4 hours ago

Plan projects, track progress and share updates without another status meeting.

<div class="alert alert-light border flex gap-4 mb-0" role="alert">
  <img src="../assets/img/avatar-5.svg" alt="Theo Harlow" class="rounded-full shrink-0" width="44" height="44">
  <div>
    <div class="font-semibold">
      Theo Harlow <span class="small text-muted font-normal">4 hours ago</span>
    </div>
    <div>
      Plan projects, track progress and share updates without another status meeting.
    </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 flex flex-col md:flex-row md:items-center gap-4 mb-0" role="alert" data-ui-theme="dark">
  <div class="text-xl">
    <i class="bi bi-cookie" aria-hidden="true"></i>
  </div>
  <div class="grow small">
    We use cookies to remember your settings and understand how the site is used.
  </div>
  <div class="flex gap-2 md:me-6">
    <button type="button" class="btn btn-light btn-sm whitespace-nowrap" data-ui-dismiss="alert">Accept all</button>
    <button type="button" class="btn btn-outline-light btn-sm whitespace-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.

Please fix 3 problems

Email must be a valid address
Password needs at least 8 characters
Terms must be accepted

<div class="alert alert-danger mb-0" role="alert" aria-live="assertive">
  <div class="font-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 17, 2026 from 02:00 to 04:00 UTC. Details

<div class="alert alert-warning rounded-none border-0 border-b border-warning/30 text-center mb-0 py-2" role="alert">
  <i class="bi bi-tools" aria-hidden="true"></i> Scheduled maintenance on <strong>Dec 17, 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 10 hours ago

APIOperational

DatabaseOperational

Email deliveryDegraded

<div class="card" style="max-width: 480px;">
  <div class="card-header flex justify-between">
    <span class="font-semibold">System status</span><span class="small text-muted">Updated 10 hours ago</span>
  </div>
  <div class="card-body">
    <div class="alert alert-success py-2 flex justify-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 flex justify-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 flex justify-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 flex items-center gap-4 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.

New99.99% uptime 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>99.99% uptime</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="flex flex-wrap gap-2">
  <div class="alert bg-success-subtle text-success-emphasis border border-success/30 rounded-full py-1 px-4 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/30 rounded-full py-1 px-4 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/30 rounded-full py-1 px-4 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/30 rounded-full py-1 px-4 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 5 days

Upgrade now to keep your projects and team members.

Upgrade plan

<div class="alert alert-light border border-primary/30 alert-dismissible fade show mb-0" role="alert">
  <div class="flex flex-col sm:flex-row gap-4 sm:items-center pe-6">
    <div class="grow">
      <div class="font-semibold">
        <i class="bi bi-hourglass-bottom" aria-hidden="true"></i> Your trial ends in 5 days
      </div>
      <div class="small text-muted">
        Upgrade now to keep your projects and team members.
      </div>
    </div>
    <a href="#" class="btn btn-primary btn-sm whitespace-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 #ORD-4764 was delivered.

Lea Tanaka joined your workspace.

Backup failed 3 hours ago.

<div class="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-emphasis"><i class="bi bi-bag-check-fill" aria-hidden="true"></i></span> Order #ORD-4764 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-ink"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span> Lea Tanaka 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-emphasis"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i></span> Backup failed 3 hours ago.
    <button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
  </div>
</div>