{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main-fullwidth.njk" %}

Alerts

Unify Alerts

Unify alerts are extention of default Bootstrap Alerts.

Background colored

You may use any background colors from the predefined classes or create your own.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Border colored

You may use any border colors from the predefined classes or create your own.

Albert Heller

Just Now

Your friend request has been accepted.

James Coolman

7 min ago

Your friend request has been declined.

Alberta Watson

2 min ago

Your friend request has been accepted.

David Lee

Just Now

Your have recieved $285 for Web Design.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Colored alerts

You may use any background colors from the predefined classes or create your own.

Edmon Low saved your pin.

5 minutes ago

Pixeel Ltd received $270 for logo.

2 hours ago

Htmlstream released a new update.

2 hours ago

Jack Watson sent you a message.

2 hours ago

Jasica Coolman saved your pin.

5 minutes ago

Jasica is offering free cofee..

5 days ago

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Other alert examples

You may use any border colors from the predefined classes or create your own.

Jasica Coolman saved your pin.

5 minutes ago

Albert Heller

Just Now

Your friend request has been accepted.

Albert Watson

2 min ago

Your friend request has been accepted.

Htmlstream released a new update.

2 hours ago

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Bootstrap Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. By default Bootstrap includes 4 state alerts such as "Success", "Info", "Warning" and "Danger". Check out the offecial Bootstrap Alerts page for more details here .

Simple alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Dismissable alerts

Check out for more details the offecial "bootstrap dismissing alerts" page here .

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Links in alerts

Use the alert-link utility class to quickly provide matching colored links within any alert.

Well done! You successfully read this important alert message .

Heads up! This alert needs your attention , but it's not super important.

Warning! Better check yourself, you're not looking too good .

Oh snap! Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Alerts with Icons

Font Awesome icons are used as an example.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode8" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Large titles

You may use any heading tags and classes for the titles e.g. <h4 class="h5">

Well done!

You successfully read this important alert message.

Heads up!

This alert needs your attention, but it's not super important.

Warning!

Better check yourself, you're not looking too good.

Oh snap!

Change a few things up and try submitting again.

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode9" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Alerts with buttons

Font Awesome icons are used as an example.

Well done!

You successfully read this important alert message. Donec id elit non mi porta gravida at eget metus.

Do this action Or do this

Heads up!

This alert needs your attention, but it's not super important. Donec id elit non mi porta gravida at eget metus.

Do this action Or do this

Warning!

Better check yourself, you're not looking too good. Gravida donec id elit non mi porta gravida at eget metus.

Do this action Or do this

Oh snap!

Change a few things up and try submitting again. Donec id elit non mi porta gravida at eget metus.

Do this action Or do this

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode10" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Alerts with buttons

Font Awesome icons are used as an example.

Well done!

You successfully read this important alert message. Donec id elit non mi porta gravida at eget metus.

Username
Email Adderss
Password

Heads up!

This alert needs your attention, but it's not super important. Donec id elit non mi porta gravida at eget metus.

Username
Email Adderss
Password

Warning!

Better check yourself, you're not looking too good. Gravida donec id elit non mi porta gravida at eget metus.

Username
Email Adderss
Password

Oh snap!

Change a few things up and try submitting again. Donec id elit non mi porta gravida at eget metus.

Username
Email Adderss
Password

{% set SCExtendedClasses = "text-center" %} {% set contentTarget = "#shortcode11" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}