Surface a contextual message with Bootstrap's native alert region.
Use for a short contextual message that belongs near the related content.
Use .alert for contextual feedback that should stay visible near the work it affects. Use a title with supporting text when the state needs explanation, or omit the title for a short message that already has enough context. At least a title or description must be visible. Keep links and actions within the alert so they remain tied to the message.
.alert
Choose a contextual variant such as .alert-success, .alert-warning, .alert-danger, or .alert-info when the message has a clear severity. Do not rely on color alone to communicate meaning; make the status clear in the visible copy, and use .alert-link when a link needs to inherit the alert's matching color treatment.
.alert-success
.alert-warning
.alert-danger
.alert-info
.alert-link
For dismissible alerts, add .alert-dismissible and a close button with data-bs-dismiss="alert"; use .fade and .show only when the removal should animate. Bootstrap removes a dismissed alert from the page, so move focus to a sensible next target after closed.bs.alert when the close button was keyboard-operated.
.alert-dismissible
data-bs-dismiss="alert"
.fade
.show
closed.bs.alert
Pair an icon with a title and description inside a quiet bordered region.
The catalog will be briefly unavailable this weekend while we upgrade the build pipeline.
1 2 3 4 5 6 7 8 9<div class="alert" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Scheduled maintenance</div> <p class="mb-0">The catalog will be briefly unavailable this weekend while we upgrade the build pipeline.</p> </div> </div>
<div class="alert" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Scheduled maintenance</div> <p class="mb-0">The catalog will be briefly unavailable this weekend while we upgrade the build pipeline.</p> </div> </div>
Use variant="destructive" for errors that need immediate attention.
variant="destructive"
The last commit broke two tests. Check the CI log for details.
1 2 3 4 5 6 7 8 9<div class="alert alert-danger" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Build failed</div> <p class="mb-0">The last commit broke two tests. Check the CI log for details.</p> </div> </div>
<div class="alert alert-danger" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Build failed</div> <p class="mb-0">The last commit broke two tests. Check the CI log for details.</p> </div> </div>
Place one documented Button action inline with the alert message when a direct response is useful.
This workspace has used 92% of its plan. Upgrade to avoid interrupted uploads.
1 2 3 4 5 6 7 8 9 10 11 12<div class="alert" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-triangle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Storage limit approaching</div> <p class="mb-0">This workspace has used 92% of its plan. Upgrade to avoid interrupted uploads.</p> </div> <div class="alert-action"> <button class="btn btn-outline-secondary btn-sm" type="button">Upgrade plan</button> </div> </div>
<div class="alert" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-triangle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Storage limit approaching</div> <p class="mb-0">This workspace has used 92% of its plan. Upgrade to avoid interrupted uploads.</p> </div> <div class="alert-action"> <button class="btn btn-outline-secondary btn-sm" type="button">Upgrade plan</button> </div> </div>
Use variant="warning" for time-sensitive notices that need attention but aren't blocking.
variant="warning"
Confirm your payment method so the workspace doesn't lose access when the trial ends.
1 2 3 4 5 6 7 8 9<div class="alert alert-warning" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-triangle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Subscription renews in 3 days</div> <p class="mb-0">Confirm your payment method so the workspace doesn't lose access when the trial ends.</p> </div> </div>
<div class="alert alert-warning" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-triangle-alert" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Subscription renews in 3 days</div> <p class="mb-0">Confirm your payment method so the workspace doesn't lose access when the trial ends.</p> </div> </div>
Use variant="success" to confirm a completed action or a positive state change.
variant="success"
The reviewer granted workspace access. The requester can join within minutes.
1 2 3 4 5 6 7 8 9<div class="alert alert-success" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Access request approved</div> <p class="mb-0">The reviewer granted workspace access. The requester can join within minutes.</p> </div> </div>
<div class="alert alert-success" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Access request approved</div> <p class="mb-0">The reviewer granted workspace access. The requester can join within minutes.</p> </div> </div>
Use variant="info" for neutral, informational notices that don't require action.
variant="info"
Moo UI 1.1 ships a refreshed token palette. Review the changelog before upgrading.
1 2 3 4 5 6 7 8 9<div class="alert alert-info" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-sparkles" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">New version available</div> <p class="mb-0">Moo UI 1.1 ships a refreshed token palette. Review the changelog before upgrading.</p> </div> </div>
<div class="alert alert-info" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-sparkles" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">New version available</div> <p class="mb-0">Moo UI 1.1 ships a refreshed token palette. Review the changelog before upgrading.</p> </div> </div>
Omit the title when one short message is clear in its surrounding context.
Your changes will appear after the page is refreshed.
1 2 3 4 5<div class="alert alert-info" role="alert"> <div class="alert-body"> <p class="mb-0">Your changes will appear after the page is refreshed.</p> </div> </div>
<div class="alert alert-info" role="alert"> <div class="alert-body"> <p class="mb-0">Your changes will appear after the page is refreshed.</p> </div> </div>
Add a Close Button; wire data-bs-dismiss="alert" when the alert should remove itself.
Component preview thumbnails were regenerated for the latest release.
1 2 3 4 5 6 7 8 9 10<div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Preview images refreshed</div> <p class="mb-0">Component preview thumbnails were regenerated for the latest release.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div>
<div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Preview images refreshed</div> <p class="mb-0">Component preview thumbnails were regenerated for the latest release.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div>
Use tabs to compare Arabic, Hebrew, and English alerts inside the same RTL layout.
تمت مراجعة طلب الوصول وسيصل صاحبه إلى مساحة العمل خلال دقائق.
1 2 3 4 5 6 7 8 9 10 11 12<div dir="rtl"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">تمت الموافقة على الطلب</div> <p class="mb-0">تمت مراجعة طلب الوصول وسيصل صاحبه إلى مساحة العمل خلال دقائق.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
<div dir="rtl"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">تمت الموافقة على الطلب</div> <p class="mb-0">تمت مراجعة طلب الوصول وسيصل صاحبه إلى مساحة العمل خلال دقائق.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
בקשת הגישה נבדקה והמשתמש יקבל גישה לסביבת העבודה בתוך דקות.
1 2 3 4 5 6 7 8 9 10 11 12<div dir="rtl"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">הבקשה אושרה</div> <p class="mb-0">בקשת הגישה נבדקה והמשתמש יקבל גישה לסביבת העבודה בתוך דקות.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
<div dir="rtl"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">הבקשה אושרה</div> <p class="mb-0">בקשת הגישה נבדקה והמשתמש יקבל גישה לסביבת העבודה בתוך דקות.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
The request was reviewed and the requester will reach the workspace within minutes.
1 2 3 4 5 6 7 8 9 10 11 12<div dir="ltr"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Access request approved</div> <p class="mb-0">The request was reviewed and the requester will reach the workspace within minutes.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
<div dir="ltr"> <div class="alert alert-dismissible fade show" role="alert"> <span class="alert-icon" aria-hidden="true"> <i class="lucide lucide-info" data-icon="inline-start" aria-hidden="true"></i> </span> <div class="alert-body"> <div class="alert-heading">Access request approved</div> <p class="mb-0">The request was reviewed and the requester will reach the workspace within minutes.</p> </div> <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button> </div> </div>
For Bootstrap's source behavior and contextual variants, see the Bootstrap Alerts documentation.
No matching pages.
Restore the default appearance.