Alerts

<div class="alert alert-primary" role="alert">
  A primary alert: Our sommelier has paired each dish with wines from small family vineyards.
</div>
<div class="alert alert-secondary" role="alert">
  A secondary alert: Our menu changes with the seasons and the best produce from nearby farms.
</div>
<div class="alert alert-success" role="alert">
  A success alert: Thousands of guests already trust us, and we work hard to keep it that way.
</div>
<div class="alert alert-danger" role="alert">
  A danger alert: Start in minutes and get help from a real person whenever you need it.
</div>
<div class="alert alert-warning" role="alert">
  A warning alert: We have been feeding this neighbourhood for over a decade, and we still love it.
</div>
<div class="alert alert-info" role="alert">
  A info alert: Book a table online in seconds, or call us for groups of eight or more.
</div>
<div class="alert alert-light" role="alert">
  A light alert: Bread is baked every morning and pasta is rolled by hand in our kitchen.
</div>
<div class="alert alert-dark" role="alert">
  A dark alert: Friendly people answer your questions quickly, by phone, chat or email.
</div>

<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>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> Cooking classes on Saturday mornings teach you our favourite recipes.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-primary alert-dismissible fade show mb-0" role="alert">
  Every dish is cooked to order, so tell us if you would like anything changed.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<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>Our team has done this many times, so you never have to guess. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
  <hr>
  <p class="mb-0 small">Next milestone: Nov 1, 2026</p>
</div>

<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>

<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">
      Zoe Ortega invited you to a call on Oct 28, 2026 at 11:30.
    </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>

<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>

<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>4 rows skipped: missing email address</li>
    <li>3 duplicate records merged</li>
    <li>Dates in column D were read as text</li>
  </ul>
</div>

<div class="alert ca-alert-accent border-primary" role="alert">
  <strong class="text-primary">Note</strong>
  <div>
    Our terrace is open from spring to autumn, with heaters for cooler evenings.
  </div>
</div>
<div class="alert ca-alert-accent border-success" role="alert">
  <strong class="text-success">Success</strong>
  <div>
    Clear prices, honest advice and no surprises along the way.
  </div>
</div>
<div class="alert ca-alert-accent border-danger mb-0" role="alert">
  <strong class="text-danger">Important</strong>
  <div>
    Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
  </div>
</div>

<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>looking-back-at-a-busy-season.zip</strong></span><span class="small text-body-secondary">50%</span>
  </div>
  <div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 8px;">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;">
    </div>
  </div>
</div>

<div class="alert alert-light border d-flex gap-3 mb-0" role="alert">
  <img src="../assets/img/avatar-6.svg" alt="Isla Novak" class="rounded-circle flex-shrink-0" width="44" height="44">
  <div>
    <div class="fw-semibold">
      Isla Novak <span class="small text-body-secondary fw-normal">yesterday</span>
    </div>
    <div>
      We keep things simple, so you can focus on what matters to you.
    </div>
    <a href="#" class="alert-link small">Reply</a>
  </div>
</div>

<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-bs-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-bs-dismiss="alert">Accept all</button>
    <button type="button" class="btn btn-outline-light btn-sm text-nowrap" data-bs-dismiss="alert">Essential only</button>
  </div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<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>

<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 17, 2026</strong> from 02:00 to 04:00 UTC. <a href="#" class="alert-link">Details</a>
</div>

<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 5 days ago</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>

<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>

<div class="alert alert-primary alert-dismissible fade show mb-0" role="alert">
  <span class="badge text-bg-primary me-2">New</span><strong>Vegan options</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-bs-dismiss="alert" aria-label="Close"></button>
</div>

<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>

<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 6 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-bs-dismiss="alert" aria-label="Close"></button>
</div>

<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-9854 was delivered.
    <button type="button" class="btn-close" data-bs-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> Mia Alvarez joined your workspace.
    <button type="button" class="btn-close" data-bs-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 3 hours ago.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>