Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
Noah Blake updated the status of Client Onboarding
30 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Alerts
Examples
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts on Bootstrap
<div class="alert alert-primary" role="alert">
This is a primary alert—something important you should know!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—some additional context.
</div>
<div class="alert alert-success" role="alert">
Success! Your operation was completed successfully.
</div>
<div class="alert alert-danger" role="alert">
Error! Something went wrong—please try again.
</div>
<div class="alert alert-warning" role="alert">
Warning! Please double-check your inputs.
</div>
<div class="alert alert-info" role="alert">
Info: Here's something you might find useful.
</div>
<div class="alert alert-light" role="alert">
Light alert—just a subtle notification.
</div>
<div class="alert alert-dark" role="alert">
Dark alert—use for general-purpose messages.
</div>
<div class="alert alert-purple mb-0" role="alert">
Purple alert—use for general-purpose messages.
</div>
This is a primary alert—something important you should know!
This is a secondary alert—some additional context.
Success! Your operation was completed successfully.
Error! Something went wrong—please try again.
Warning! Please double-check your inputs.
Info: Here's something you might find useful.
Light alert—just a subtle notification.
Dark alert—use for general-purpose messages.
Purple alert—use for general-purpose messages.
<div class="alert alert-primary text-bg-primary alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Heads up! This is a primary alert with important information.</div>
</div>
<div class="alert alert-secondary text-bg-secondary alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Notice: This is a secondary alert with supporting details.</div>
</div>
<div class="alert alert-success text-bg-success alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Success! Your action was completed successfully.</div>
</div>
<div class="alert alert-danger text-bg-danger alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Error! Something went wrong—please try again later.</div>
</div>
<div class="alert alert-warning text-bg-warning alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Warning! Please review your input before proceeding.</div>
</div>
<div class="alert alert-info text-bg-info alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Info: Here’s something you might find helpful.</div>
</div>
<div class="alert alert-light text-bg-light alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Note: This is a light alert with a subtle message.</div>
</div>
<div class="alert alert-dark text-bg-dark alert-dismissible" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Notice: This dark alert is great for general messages.</div>
</div>
<div class="alert alert-purple text-bg-purple alert-dismissible mb-0" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<div>Heads up: This purple alert is perfect for catching attention with general information.</div>
</div>
Heads up! This is a primary alert with important information.
Notice: This is a secondary alert with supporting details.
Success! Your action was completed successfully.
Error! Something went wrong—please try again later.
Warning! Please review your input before proceeding.
Info: Here’s something you might find helpful.
Note: This is a light alert with a subtle message.
Notice: This dark alert is great for general messages.
Heads up: This purple alert is perfect for catching attention with general information.
<div class="alert alert-primary" role="alert">
Need more info? Check out <a href="#" class="alert-link">this primary link</a> for important details.
</div>
<div class="alert alert-secondary" role="alert">
Here's a secondary message with <a href="#" class="alert-link">a helpful link</a> for additional context.
</div>
<div class="alert alert-success" role="alert">
Operation successful! View the results <a href="#" class="alert-link">by clicking here</a>.
</div>
<div class="alert alert-danger" role="alert">
Something went wrong. Learn more <a href="#" class="alert-link">through this alert link</a>.
</div>
<div class="alert alert-warning" role="alert">
Heads up! You might want to check <a href="#" class="alert-link">this warning link</a>.
</div>
<div class="alert alert-info" role="alert">
Here’s some information that may help—click <a href="#" class="alert-link">this link</a> to read more.
</div>
<div class="alert alert-light" role="alert">
Just a light reminder with <a href="#" class="alert-link">a gentle link</a> to explore.
</div>
<div class="alert alert-dark" role="alert">
This is a general dark alert. Find out more <a href="#" class="alert-link">by clicking here</a>.
</div>
<div class="alert alert-purple mb-0" role="alert">
Important notice: For more information, <a href="#" class="alert-link">click here</a>.
</div>
Need more info? Check out this primary link for important details.
Here's a secondary message with a helpful link for additional context.
Operation successful! View the results by clicking here.
Something went wrong. Learn more through this alert link.
Heads up! You might want to check this warning link.
Here’s some information that may help—click this link to read more.
Just a light reminder with a gentle link to explore.
This is a general dark alert. Find out more by clicking here.
Important notice: For more information, click here.
<div class="alert alert-success p-3" role="alert">
<h4 class="alert-heading">Great job!</h4>
<p>You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.</p>
<hr class="border-success border-opacity-25">
<p class="mb-0">Use margin utilities to keep your content clean and organized.</p>
</div>
<div class="alert alert-secondary p-3 d-flex" role="alert">
<i class="ti ti-alarm-average fs-1 me-2"></i>
<div>
<h4 class="alert-heading">Heads up!</h4>
<p>This alert message gives additional information with a longer message to show content spacing within an alert.</p>
<hr class="border-secondary border-opacity-25">
<p class="mb-0">Apply spacing classes wisely to maintain structure and clarity.</p>
</div>
</div>
<div class="alert alert-purple d-flex p-3 mb-0" role="alert">
<i class="ti ti-phone-ringing fs-1 me-2"></i>
<div>
<h4 class="alert-heading">Notice!</h4>
<p>You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.</p>
<button type="button" class="btn btn-primary btn-sm">Got it</button>
</div>
</div>
Great job!
You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.
Use margin utilities to keep your content clean and organized.
Heads up!
This alert message gives additional information with a longer message to show content spacing within an alert.
Apply spacing classes wisely to maintain structure and clarity.
Notice!
You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.
<div class="alert alert-primary alert-dismissible border border-primary" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>A primary alert with a full border!</div>
</div>
<div class="alert alert-secondary alert-bordered alert-dismissible border-start border-secondary" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>A secondary alert with a left border only!</div>
</div>
<div class="alert alert-dark alert-bordered alert-dismissible border-bottom border-dark" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>A dark alert with a bottom border!</div>
</div>
<div class="alert alert-purple alert-dismissible border-2 border border-dashed border-purple" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>A purple alert with a dashed border!</div>
</div>
<div class="alert alert-danger alert-dismissible border-2 border-danger" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div>A danger alert with a thick border!</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<div>A warning alert with a custom close button!</div>
<button type="button" class="ms-auto btn btn-sm btn-warning btn-icon rounded-circle" data-bs-dismiss="alert" aria-label="Close">
<i class="ti ti-x fs-lg"></i>
</button>
</div>
<div class="alert alert-info alert-dismissible d-flex align-items-center gap-2" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<i class="ti ti-alert-octagon fs-xl"></i> An info alert with a custom icon!
</div>
<div class="alert alert-light border-2 d-flex align-items-center p-3 mb-0" role="alert">
<i class="ti ti-phone-ringing text-success fs-2 me-3"></i>
<div>
<h4 class="alert-heading">Notice!</h4>
<p class="m-0">You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.</p>
</div>
</div>
A primary alert with a full border!
A secondary alert with a left border only!
A dark alert with a bottom border!
A purple alert with a dashed border!
A danger alert with a thick border!
A warning alert with a custom close button!
An info alert with a custom icon!
Notice!
You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.