Alerts
Default Alerts
Use the alert class to show a default alert.
Primary Alert
Hi! A simple Primary alert —check it out!
Secondary Alert
How are you! A simple secondary alert —check it out!
Success Alert
Yey! Everything worked! A simple success alert —check it out!
Danger Alert
Something is very wrong! A simple danger alert —check it out!
Warning Alert
Uh oh, something went wrong A simple warning alert —check it out!
Info Alert
Don't forget' it ! A simple info alert —check it out!
Light Alert
Mind Your Step! A simple light alert —check it out!
Dark Alert
Did you know? A simple dark alert —check it out!
<!-- Primary Alert --> <div class="alert alert-primary material-shadow" role="alert"> <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out! </div><!-- Secondary Alert --> <div class="alert alert-secondary material-shadow" role="alert"> <strong> How are you! </strong> A simple <b>secondary alert</b> —check it out! </div><!-- success Alert --> <div class="alert alert-success material-shadow" role="alert"> <strong> Yey! Everything worked! </strong> A simple <b>success alert</b> —check it out! </div><!-- danger Alert --> <div class="alert alert-danger material-shadow" role="alert"> <strong> Something is very wrong! </strong> A simple <b>danger alert</b> —check it out! </div><!-- warning Alert --> <div class="alert alert-warning material-shadow" role="alert"> <strong> Uh oh, something went wrong </strong> A simple <b>warning alert</b> —check it out! </div><!-- Info Alert --> <div class="alert alert-info material-shadow" role="alert"> <strong> Don't forget' it ! </strong> A simple <b>info alert</b> —check it out! </div><!-- Light Alert --> <div class="alert alert-light material-shadow" role="alert"> <strong> Mind Your Step! </strong> A simple <b>light alert</b> —check it out! </div><!-- Dark Alert --> <div class="alert alert-dark material-shadow" role="alert"> <strong> Did you know? </strong> A simple <b>dark alert</b> —check it out! </div>
Borderless Alerts
Use the border-0 class to set alert without border.
Primary Alert
Hi! A simple Primary alert —check it out!
Secondary Alert
How are you! A simple secondary alert —check it out!
Success Alert
Yey! Everything worked! A simple success alert —check it out!
Danger Alert
Something is very wrong! A simple danger alert—check it out!
Warning Alert
Uh oh, something went wrong A simple warning alert —check it out!
Info Alert
Don't forget' it ! A simple info alert —check it out!
Light Alert
Mind Your Step! A simple light alert —check it out!
Dark Alert
Did you know? A simple dark alert —check it out!
<!-- Primary Alert --> <div class="alert border-0 alert-primary material-shadow" role="alert"> <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out! </div><!-- Secondary Alert --> <div class="alert border-0 alert-secondary material-shadow" role="alert"> <strong> How are you! </strong> A simple <b>secondary alert</b> —check it out! </div><!-- Success Alert --> <div class="alert border-0 alert-success material-shadow" role="alert"> <strong> Yey! Everything worked! </strong> A simple <b>success alert</b> —check it out! </div><!-- Danger Alert --> <div class="alert border-0 alert-danger material-shadow" role="alert"> <strong> Something is very wrong! </strong> A simple <b>danger alert</b> —check it out! </div><!-- Warning Alert --> <div class="alert border-0 alert-warning material-shadow" role="alert"> <strong> Uh oh, something went wrong </strong> A simple <b>warning alert</b> —check it out! </div><!-- Info Alert --> <div class="alert border-0 alert-info material-shadow" role="alert"> <strong> Don't forget' it ! </strong> A simple <b>info alert</b> —check it out! </div><!-- Light Alert --> <div class="alert border-0 alert-light material-shadow" role="alert"> <strong> Mind Your Step! </strong> A simple <b>light alert</b> —check it out! </div><!-- Dark Alert --> <div class="alert border-0 alert-dark mb-0 material-shadow" role="alert"> <strong> Did you know? </strong> A simple <b>dark alert</b> —check it out! </div>
Dismissing Alerts
Use the alert-dismissible class to add dismissing button to the alert.
Primary Alert
Hi! A simple Dismissible primary Alert — check it out!
Secondary Alert
How are you! A simple Dismissible secondary alert
—check it out!
Success Alert
Right Way ! A simple Dismissible success alert —check
it out!
Danger Alert
Something is very wrong! A simple Dismissible danger alert —check
it out!
Warning Alert
Welcome Back! A simple Dismissible warning alert —check it out!
Info Alert
Don't forget' it ! A simple Dismissible info alert
—check it out!
Light Alert
Mind Your Step! A simple Dismissible light alert
—check it out!
Dark Alert
Did you know? A simple Dismissible dark alert
—check it out!
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible fade show material-shadow" role="alert"> <strong> Hi! </strong> A simple <b>Dismissible primary Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> How are you! </strong> A simple <b>Dismissible secondary Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Yey! Everything worked! </strong> A simple <b>Dismissible success Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Something is very wrong! </strong> A simple <b>Dismissible danger Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Welcome Back! </strong> A simple <b>Dismissible warning Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Don't forget' it ! </strong> A simple <b>Dismissible info Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Mind Your Step! </strong> A simple <b>Dismissible light Alert </b> — check it out! <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 material-shadow" role="alert"> <strong> Did you know? </strong> A simple <b>Dismissible dark Alert </b> — check it out! <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Link Color Alerts
Use the alert-link class at <a> tag to show matching colored links within the given alert.
Primary Alert
A simple Primary alert with an example
link. Give it a click if you like.
Secondary Alert
A simple Secondary alert with an example
link. Give it a click if you like.
Success Alert
A simple Success alert with an example
link. Give it a click if you like.
Danger Alert
A simple Danger alert with an example
link. Give it a click if you like.
Warning Alert
A simple Warning alert with an example
link. Give it a click if you like.
Info Alert
A simple Info alert with an example
link. Give it a click if you like.
Light Alert
A simple Light alert with an example
link. Give it a click if you like.
Dark Alert
A simple Dark alert with an example
link. Give it a click if you like.
<!-- Primary Alert --> <div class="alert alert-primary material-shadow" role="alert"> A simple <b>Primary alert</b> 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 material-shadow" role="alert"> A simple <b>Secondary alert</b> 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 material-shadow" role="alert"> A simple <b>Success alert</b> 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 material-shadow" role="alert"> A simple <b>Danger alert</b> 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 material-shadow" role="alert"> A simple <b>Warning alert</b> 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 material-shadow" role="alert"> A simple <b>Info alert</b> 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 material-shadow" role="alert"> A simple <b>Light alert</b> 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 material-shadow" role="alert"> A simple <b>Dark alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
Live Alert Example
Click the Show live alert button to show an alert on button click.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Outline Alerts
Use the border-2 bg-body-secondary class to set an alert with outline.
Primary Outline Alert
Hi! - Outline primary alert example
Secondary Outline Alert
How are you! - Outline secondary alert example
Success Outline Alert
Yey! Everything worked! - Outline success alert example
Danger Outline Alert
Something is very wrong! - Outline danger alert example
Warning Outline Alert
Uh oh, something went wrong! - Outline warning alert example
Info Outline Alert
Don't forget' it ! - Outline info alert example
Dark Alert
Did you know? - Outline dark alert example
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Hi! </strong> - Outline <b>primary alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> How are you! </strong> - Outline <b>secondary alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Yey! Everything worked! </strong> - Outline <b>success alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Something is very wrong! </strong> - Outline <b>danger alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Uh oh, something went wrong! </strong> - Outline <b>warning alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Don't forget' it ! </strong> - Outline <b>info alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-dismissible border-2 bg-body-secondary fade show material-shadow" role="alert"> <strong> Did you know? </strong> - Outline <b>dark alert</b> example <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Left Border Alerts
Use the alert-border-left class to set an alert with the left border & outline.
Primary Alert
Primary
- Left border alert
Secondary Alert
Secondary
- Left border alert
Success Alert
Success
- Left border alert
Danger Alert
Danger
- Left border alert
Warning Alert
Warning
- Left border alert
Info Alert
Info
- Left border alert
Light Alert
Light
- Left border alert
Dark Alert
Dark
- Left border alert
<!-- Primary Alert --> <div class="alert alert-primary alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-user-smile-line me-3 align-middle"></i> <strong>Primary</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-check-double-line me-3 align-middle"></i> <strong>Secondary</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-notification-off-line me-3 align-middle"></i> <strong>Success</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-error-warning-line me-3 align-middle"></i> <strong>Danger</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-alert-line me-3 align-middle"></i> <strong>Warning</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-airplay-line me-3 align-middle"></i> <strong>Info</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Light Alert --> <div class="alert alert-light alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-mail-line me-3 align-middle"></i> <strong>Light</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-border-left alert-dismissible fade show material-shadow" role="alert"> <i class="ri-refresh-line me-3 align-middle"></i> <strong>Dark</strong> - Left border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Label Icon Alerts
Use the alert-label-icon class to set an alert with a label icon.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible bg-primary text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-dismissible bg-secondary text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-dismissible bg-success text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-dismissible bg-danger text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-dismissible bg-warning text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-dismissible bg-info text-white alert-label-icon fade show material-shadow" role="alert"> <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Light Alert --> <div class="alert alert-light alert-dismissible bg-light text-body alert-label-icon fade show material-shadow" role="alert"> <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-dismissible bg-dark text-white alert-label-icon fade show mb-0 material-shadow" role="alert"> <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Label icon alert <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Additional Content Alerts
Use the alert-additional class and Use the alert- class to HTML elements like headings, paragraphs, dividers etc.
Primary Alert
Well done !
Aww yeah, you successfully read this important alert message.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Danger Alert
Something is very wrong!
Change a few things up and try submitting again.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success Alert
Yey! Everything worked!
This alert needs your attention, but it's not super important.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning Alert
Uh oh, something went wrong!
Better check yourself, you're not looking too good.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible alert-additional fade show material-shadow" role="alert"> <div class="alert-body"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <div class="d-flex"> <div class="flex-shrink-0 me-3"> <i class="ri-user-smile-line fs-16 align-middle"></i> </div> <div class="flex-grow-1"> <h5 class="alert-heading">Well done !</h5> <p class="mb-0">Aww yeah, you successfully read this important alert message. </p> </div> </div> </div> <div class="alert-content"> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div><!-- Danger Alert --> <div class="alert alert-danger alert-dismissible alert-additional fade show material-shadow" role="alert"> <div class="alert-body"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <div class="d-flex"> <div class="flex-shrink-0 me-3"> <i class="ri-error-warning-line fs-16 align-middle"></i> </div> <div class="flex-grow-1"> <h5 class="alert-heading">Something is very wrong!</h5> <p class="mb-0">Change a few things up and try submitting again. </p> </div> </div> </div> <div class="alert-content"> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div><!-- Success Alert --> <div class="alert alert-success alert-dismissible alert-additional fade show material-shadow" role="alert"> <div class="alert-body"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <div class="d-flex"> <div class="flex-shrink-0 me-3"> <i class="ri-notification-off-line fs-16 align-middle"></i> </div> <div class="flex-grow-1"> <h5 class="alert-heading">Yey! Everything worked!</h5> <p class="mb-0">This alert needs your attention, but it's not super important. </p> </div> </div> </div> <div class="alert-content"> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div><!-- Warning Alert --> <div class="alert alert-warning alert-dismissible alert-additional fade show mb-0 material-shadow" role="alert"> <div class="alert-body"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <div class="d-flex"> <div class="flex-shrink-0 me-3"> <i class="ri-alert-line fs-16 align-middle"></i> </div> <div class="flex-grow-1"> <h5 class="alert-heading">Uh oh, something went wrong!</h5> <p class="mb-0">Better check yourself, you're not looking too good. </p> </div> </div> </div> <div class="alert-content"> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div>
Top Border with Outline Alerts
Use the alert-top-border class to set an alert with the top border and outline.
Primary Alert
Primary
- Top border alert
Secondary Alert
Secondary
- Top border alert
Success Alert
Success
- Top border alert
Danger Alert
Danger
- Top border alert
Warning Alert
Warning
- Top border alert
Info Alert
Info
- Top border alert
Light Alert
Light
- Top border alert
Dark Alert
Dark
- Top border alert
<!-- Primary Alert --> <div class="alert alert-primary alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-user-smile-line me-3 align-middle fs-16 text-primary"></i><strong>Primary</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-check-double-line me-3 align-middle fs-16 text-secondary"></i><strong>Secondary</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-notification-off-line me-3 align-middle fs-16 text-success"></i><strong>Success</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-error-warning-line me-3 align-middle fs-16 text-danger"></i><strong>Danger</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-alert-line me-3 align-middle fs-16 text-warning"></i><strong>Warning</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-airplay-line me-3 align-middle fs-16 text-info"></i><strong>Info</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Light Alert --> <div class="alert alert-light alert-top-border alert-dismissible fade show material-shadow" role="alert"> <i class="ri-mail-line me-3 align-middle fs-16 text-light"></i><strong>Light</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-top-border alert-dismissible fade show mb-0 material-shadow" role="alert"> <i class="ri-refresh-line me-3 align-middle fs-16 text-body"></i><strong>Dark</strong> - Top border alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Label Icon Arrow Alerts
Use the alert-label-icon label-arrow class to show an alert with label icon and arrow.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
info Alert
Light Alert
Dark Alert
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Light Alert --> <div class="alert alert-light alert-dismissible alert-label-icon label-arrow fade show material-shadow" role="alert"> <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-dismissible alert-label-icon label-arrow fade show mb-0 material-shadow" role="alert"> <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Label icon arrow alert <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button> </div>
Rounded Label Icon Alerts
Use the alert-label-icon rounded-label class to set an alert with a rounded label icon.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert --> <div class="alert alert-primary alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Secondary Alert --> <div class="alert alert-secondary alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Success Alert --> <div class="alert alert-success alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Danger Alert --> <div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Warning Alert --> <div class="alert alert-warning alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Info Alert --> <div class="alert alert-info alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Light Alert --> <div class="alert alert-light alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div><!-- Dark Alert --> <div class="alert alert-dark alert-dismissible alert-label-icon rounded-label fade show material-shadow" role="alert"> <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Rounded label alert <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Solid Alerts
Use the bg-*, border-* & text-white class to set an alert with solid style.
Primary Solid Alert
Hi! - Solid primary alert example
Secondary Solid Alert
How are you! - Solid secondary alert example
Success Solid Alert
Yey! Everything worked! - Solid success alert example
Danger Solid Alert
Something is very wrong! - Solid danger alert example
Warning Solid Alert
Uh oh, something went wrong! - Solid warning alert example
Info Solid Alert
Don't forget' it ! - Solid info alert example
Light Solid Alert
Mind Your Step! - Solid secondary alert example
Dark Solid Alert
Did you know? - Solid dark alert example
<!-- Primary Alert --> <div class="alert bg-primary border-primary text-white material-shadow" role="alert"> <strong>Hi!</strong> - Solid <b>primary alert</b> example </div><!-- Secondary Alert --> <div class="alert bg-secondary border-secondary text-white material-shadow" role="alert"> <strong>How are you!</strong> - Solid <b>secondary alert</b> example </div><!-- Success Alert --> <div class="alert bg-success border-success text-white material-shadow" role="alert"> <strong>Yey! Everything worked!</strong> - Solid <b>success alert</b> example </div><!-- Danger Alert --> <div class="alert bg-danger border-danger text-white material-shadow" role="alert"> <strong>Something is very wrong!</strong> - Solid <b>danger alert</b> example </div><!-- Warning Alert --> <div class="alert bg-warning border-warning text-white material-shadow" role="alert"> <strong>Uh oh, something went w rong!</strong> - Solid <b>warning alert</b> example </div><!-- Info Alert --> <div class="alert bg-info border-info text-white material-shadow" role="alert"> <strong>Don't forget' it !</strong> - Solid <b>info alert</b> example </div><!-- Light Alert --> <div class="alert bg-light border-light text-body material-shadow" role="alert"> <strong>Mind Your Step!</strong> - Solid <b>light alert</b> example </div><!-- Dark Alert --> <div class="alert bg-dark border-dark text-white mb-0 material-shadow" role="alert"> <strong>Did you know?</strong> - Solid <b>dark alert</b> example </div>