Alerts

Default Alert

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.

Dismissing Alert with Solid Colors

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.

Link Color

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.

Additional Content

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.

Custom Alerts

A primary alert with a full border!

A secondary alert with a left border only!

A dark alert with a bottom border!

A success 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.

Live Alert

                                                                
                                            <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Welcome back!

Dashboard & Analytics

Project Management

User Management

Notifications

Alerts

Default Alert

Dismissing Alert with Solid Colors

Link Color

Additional Content

Great job!

Heads up!

Notice!

Custom Alerts

Notice!

Live Alert