Alerts

获取即时赛况更新和社区动态。

Bootstrap Docs

Basic example

A simple primary alert with an example link. Give it a click if you like.

A simple accent alert with an example linkDiscover more about im体育数据 with im体育.

A simple secondary alert with an example linkim体育 focuses on im电竞, delivering a professional and reliable experience.

A simple success alert with an example linkBuilt around im体育分析, im体育 keeps refining a better service.

A simple danger alert with an example linkim体育 specializes in im体育官网, serving every user with care.

A simple warning alert with an example linkFor everything Your daily dose of sports gossip and game-day glory!, im体育 offers attentive, thoughtful support.

A simple info alert with an example linkWith Connect with fellow fanatics and cheer your heart out! at its core, im体育 brings a fast, seamless experience.

A simple light alert with an example linkDiscover more about Real-time scores, insider info, and epic highlights – all in one place! with im体育.

A simple dark alert with an example linkim体育 focuses on We're so stable, you'll think our servers run on pure adrenaline!, delivering a professional and reliable experience.

<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
  A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Success alert -->
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Info alert -->
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Light alert -->
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

// Primary alert
.alert.alert-primary(role="alert")
  | A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Accent alert
.alert.alert-accent(role="alert")
  | A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Secondary alert
.alert.alert-secondary(role="alert")
  | A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Success alert
.alert.alert-success(role="alert")
  | A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Danger alert
.alert.alert-danger(role="alert")
  | A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Warning alert
.alert.alert-warning(role="alert")
  | A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Info alert
.alert.alert-info(role="alert")
  | A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Light alert
.alert.alert-light(role="alert")
  | A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Dark alert
.alert.alert-dark(role="alert")
  | A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

Alert with icon

Built around im体育直播, im体育 keeps refining a better service. an example linkim体育 specializes in im体育数据, serving every user with care.

im体育 specializes in im电竞, serving every user with care. an example linkFor everything im体育分析, im体育 offers attentive, thoughtful support.

With im体育官网 at its core, im体育 brings a fast, seamless experience. an example linkDiscover more about Your daily dose of sports gossip and game-day glory! with im体育.

im体育 focuses on Connect with fellow fanatics and cheer your heart out!, delivering a professional and reliable experience. an example linkBuilt around Real-time scores, insider info, and epic highlights – all in one place!, im体育 keeps refining a better service.

im体育 specializes in We're so stable, you'll think our servers run on pure adrenaline!, serving every user with care. an example linkFor everything im体育直播, im体育 offers attentive, thoughtful support.

With im体育数据 at its core, im体育 brings a fast, seamless experience. an example linkDiscover more about im电竞 with im体育.

Discover more about We're so stable, you'll think our servers run on pure adrenaline! with im体育. an example linkim体育 focuses on im体育直播, delivering a professional and reliable experience.

Built around im体育数据, im体育 keeps refining a better service. an example linkim体育 specializes in im电竞, serving every user with care.

For everything im体育分析, im体育 offers attentive, thoughtful support. an example linkWith im体育官网 at its core, im体育 brings a fast, seamless experience.

<!-- Primary alert -->
<div class="alert alert-primary d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-bell"></i>
  </div>
  <div>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Accent alert -->
<div class="alert alert-accent d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-security-check"></i>
  </div>
  <div>A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-time"></i>
  </div>
  <div>A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Success alert -->
<div class="alert alert-success d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-check-circle"></i>
  </div>
  <div>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Danger alert -->
<div class="alert alert-danger d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-close-circle"></i>
  </div>
  <div>A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Warning alert -->
<div class="alert alert-warning d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-security-announcement"></i>
  </div>
  <div>A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Info alert -->
<div class="alert alert-info d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-announcement"></i>
  </div>
  <div>A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Light alert -->
<div class="alert alert-light d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-unlocked"></i>
  </div>
  <div>A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

<!-- Dark alert -->
<div class="alert alert-dark d-flex" role="alert">
  <div class="alert-icon">
    <i class="ci-location"></i>
  </div>
  <div>A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>

// Primary alert
.alert.alert-primary.d-flex(role="alert")
  .alert-icon
    i.ci-bell
  div A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Accent alert
.alert.alert-accent.d-flex(role="alert")
  .alert-icon
    i.ci-security-check
  div A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Secondary alert
.alert.alert-secondary.d-flex(role="alert")
  .alert-icon
    i.ci-time
  div A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Success alert
.alert.alert-success.d-flex(role="alert")
  .alert-icon
    i.ci-check-circle
  div A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Danger alert
.alert.alert-danger.d-flex(role="alert")
  .alert-icon
    i.ci-close-circle
  div A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Warning alert
.alert.alert-warning.d-flex(role="alert")
  .alert-icon
    i.ci-security-announcement
  div A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Info alert
.alert.alert-info.d-flex(role="alert")
  .alert-icon
    i.ci-announcement
  div A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Light alert
.alert.alert-light.d-flex(role="alert")
  .alert-icon
    i.ci-unlocked
  div A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Dark alert
.alert.alert-dark.d-flex(role="alert")
  .alert-icon
    i.ci-location
  div A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

Dismissible alerts

Primary alert: Dismiss me by clicking the close button on the right.

Accent alert: Discover more about Your daily dose of sports gossip and game-day glory! with im体育.

Secondary alert: im体育 focuses on Connect with fellow fanatics and cheer your heart out!, delivering a professional and reliable experience.

Success alert: Built around Real-time scores, insider info, and epic highlights – all in one place!, im体育 keeps refining a better service.

Danger alert: im体育 specializes in We're so stable, you'll think our servers run on pure adrenaline!, serving every user with care.

Warning alert: im体育 specializes in Your daily dose of sports gossip and game-day glory!, serving every user with care.

Info alert: For everything Connect with fellow fanatics and cheer your heart out!, im体育 offers attentive, thoughtful support.

Light alert: With Real-time scores, insider info, and epic highlights – all in one place! at its core, im体育 brings a fast, seamless experience.

Dark alert: Discover more about We're so stable, you'll think our servers run on pure adrenaline! with im体育.

<!-- Primary alert -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
  <span class="fw-medium">Primary alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Accent alert -->
<div class="alert alert-accent alert-dismissible fade show" role="alert">
  <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
  <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Success alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <span class="fw-medium">Success alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Danger alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <span class="fw-medium">Danger alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Warning alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <span class="fw-medium">Warning alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Info alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
  <span class="fw-medium">Info alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Light alert -->
<div class="alert alert-light alert-dismissible fade show" role="alert">
  <span class="fw-medium">Light alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Dark alert -->
<div class="alert alert-dark alert-dismissible fade show" role="alert">
  <span class="fw-medium">Dark alert:</span> Dismiss me by clicking the close button on the right.
  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

// Primary alert
.alert.alert-primary.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Primary alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Accent alert
.alert.alert-accent.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Secondary alert
.alert.alert-secondary.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Secondary alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Success alert
.alert.alert-success.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Success alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Danger alert
.alert.alert-danger.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Danger alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Warning alert
.alert.alert-warning.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Warning alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Info alert
.alert.alert-info.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Info alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Light alert
.alert.alert-light.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Light alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close

// Dark alert
.alert.alert-dark.alert-dismissible.fade.show(role="alert")
  | <span class="fw-medium">Dark alert:</span> Dismiss me by clicking the close button on the right.
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close.btn-close-white

Additional content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
  <h4 class="pt-2 alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="pt-3 mb-2">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

// Accent alert
.alert.alert-accent(role="alert")
  h4.pt-2.alert-heading Well done!
  p Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  hr
  p.pt-3.mb-2 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Background image

Check Our Limited Offers!

Save up to 50%

View offers

<!-- Alert with bakground image -->
<div class="alert alert-dismissible bg-size-cover fade show text-center py-5" style="background-image: url(path-to-image)" role="alert">
  <i class="ci-time d-block text-white my-4" style="font-size: 3rem;"></i>
  <h2 class="text-white text-shadow">Check Our Limited Offers!</h2>
  <h4 class="text-white fs-normal text-shadow mb-4 pb-2">Save up to 50%</h4>
  <a href="#" class="btn btn-primary mb-3">View offers</a>
  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

// Alert with bakground image
.alert.alert-dismissible.bg-size-cover.fade.show.text-center.py-5(style="background-image: url(path-to-image)" role="alert")
  i(style="font-size: 3rem;").ci-time.d-inline-block.text-white.my-4
  h2.text-white.text-shadow Check Our Limited Offers!
  h4.text-white.fs-normal.text-shadow.mb-4.pb-2 Save up to 50%
  a(href="#").btn.btn-primary.mb-3 View offers
  button(type="button", data-bs-dismiss="alert", aria-label="Close").btn-close.btn-close-white