1. Home
  2. Alerts

Alerts

NOTE: This is demonstrative page of static alerts. Click here to see them in action.

Light Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Solid Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Bordered alerts

Bordered alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

With bold borders

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
With inset border

With inset borders

Info alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Success alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Warning alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Danger alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Light content body

3 new projects added to rss feed.
You have successfully created new profile.
Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Solid content body

3 new projects added to rss feed.
You have successfully created new profile.
Advanced Alerts

Heads up! You got a new message!

This alert needs your attention, but it's not super important. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Well done! You got a new message!

You successfully read this important alert message. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Warning! You got a warning!

Please fill all the fields and submit again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got a error!

Change a few things up and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

NOTE: This is demonstrative page of static alerts. Click here to see them in action.

Apply class .rounded to .alert to make the square alert rounded.

Light Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Solid Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Bordered alerts

Bordered alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

With bold borders

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
With inset border

With inset borders

Info alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Success alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Warning alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Danger alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Light content body

3 new projects added to rss feed.
You have successfully created new profile.
Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Solid content body

3 new projects added to rss feed.
You have successfully created new profile.
Advanced Alerts

Heads up! You got a new message!

This alert needs your attention, but it's not super important. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Well done! You got a new message!

You successfully read this important alert message. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Warning! You got a warning!

Please fill all the fields and submit again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got a error!

Change a few things up and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

NOTE: This is demonstrative page of static alerts. Click here to see them in action.

Apply class .circle to .alert to make the square alert circle.

Light Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Solid Alerts
Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissible alerts

Dismissible alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Bordered alerts

Bordered alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

With bold borders

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
With inset border

With inset borders

Info alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Success alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Warning alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Danger alert heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Light content body

3 new projects added to rss feed.
You have successfully created new profile.
Iconic

With left icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

With right icon

3 new projects added to rss feed.
You have successfully created new profile.
Javascript warning on line 300.
Server has stoppped working.

Solid content body

3 new projects added to rss feed.
You have successfully created new profile.
Advanced Alerts

Heads up! You got a new message!

This alert needs your attention, but it's not super important. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Well done! You got a new message!

You successfully read this important alert message. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Warning! You got a warning!

Please fill all the fields and submit again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got a error!

Change a few things up and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

© Copyright 2017 | All rights reserved.