Alerts

Examples

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts on Bootstrap

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.

Purple 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.

Heads up: This purple alert is perfect for catching attention with general information.

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 .

Important notice: For more information, click 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 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.

Welcome to Inspinia Admin Theme.

Dashboard & Analytics

Project Management

User Management

eCommerce

Chat

Task

Email

Companies

Contacts Diary

Calendar

Support

help@mydomain.com

+(12) 3456 7890

Unlock Exclusive Savings

$49.00 / $25 USD

Messages

Notifications

Welcome back!

Alerts

Examples

Default Alert

Dismissing Alert with Solid Colors

Link Color

Additional Content

Great job!

Heads up!

Notice!

Custom Alerts

Notice!

Live Alert

Admin Customizer

Select Theme

Default

Minimal

Modern

Material

SaaS

Flat

Galaxy

Luxe

Retro

Neon

Pixel

Color Scheme

Light

Dark

System

Topbar Color

Light

Dark

Gray

Gradient

Sidenav Color

Light

Dark

Gray

Gradient

Image

Sidebar Size

Default

Compact

Condensed

On Hover

On Hover - Show

Offcanvas

Layout Width

Fluid

Boxed

Layout Direction

LTR

RTL

Layout Position

Sidebar User Info