ERES Laravel

Chat List

Show All

A
Archie Parker
Kalid is online
Alfie Mason
Taherah left 7 mins ago
AharlieKane
Sami is online
Athan Jacoby
Nargis left 30 mins ago
B
Bashid Samim
Rashid left 50 mins ago
Breddie Ronan
Kalid is online
Ceorge Carson
Taherah left 7 mins ago
D
Darry Parker
Sami is online
Denry Hunter
Nargis left 30 mins ago
J
Jack Ronan
Rashid left 50 mins ago
Jacob Tucker
Kalid is online
James Logan
Taherah left 7 mins ago
Joshua Weston
Sami is online
O
Oliver Acker
Nargis left 30 mins ago
Oscar Weston
Rashid left 50 mins ago

Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today

Hi Khalid i am good tnx how about you? 8:55 AM, Today

I am good too, thank you for your chat template 9:00 AM, Today

You are welcome 9:05 AM, Today

I am looking for your next templates 9:07 AM, Today

Ok, thank you have a good day 9:10 AM, Today

Bye, see you 9:12 AM, Today

Hi, how are you samim? 8:40 AM, Today

Hi Khalid i am good tnx how about you? 8:55 AM, Today

I am good too, thank you for your chat template 9:00 AM, Today

You are welcome 9:05 AM, Today

I am looking for your next templates 9:07 AM, Today

Ok, thank you have a good day 9:10 AM, Today

Bye, see you 9:12 AM, Today

Notications

Show All

SEVER STATUS
KK

David Nester Birthday
Today
SOCIAL
RU

Perfection Simplified
Jame Smith commented on your status
SEVER STATUS
AU

AharlieKane
Sami is online
MO

Athan Jacoby
Nargis left 30 mins ago

Notes

Add New Nots

New order placed..
10 Aug 2020
Youtube, a video-sharing website..
10 Aug 2020
john just buy your product..
10 Aug 2020
Athan Jacoby
10 Aug 2020

Check your job schedule

Made with by DexignZone

Basic Alerts

Bootstrap default style

Welcome! Message has been sent.

Done! Your profile photo updated.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message sending failed.

Error! You successfully read this important alert message.

Error! You successfully read this message..


<div class="alert alert-primary alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
    <strong>Welcome!</strong> Message has been sent.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
    <strong>Done!</strong> Your profile photo updated.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-success alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
    <strong>Success!</strong> Message has been sent.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-info alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
    <strong>Info!</strong> You have got 5 new email.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
    <strong>Warning!</strong> Something went wrong. Please check.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> Message sending failed.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> You successfully read this important alert message.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-light alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> You successfully read this message..
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>

Solid color alerts

add .solid class to change the solid color.

Welcome! Message has been sent.

Done! Your profile photo updated.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message sending failed.

Error! You successfully read this important alert message.

Error! You successfully read this message..

  <div class="alert alert-primary solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
    <strong>Welcome!</strong> Message has been sent.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-secondary solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
    <strong>Done!</strong> Your profile photo updated.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>

<div class="alert alert-success solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
    <strong>Success!</strong> Message has been sent.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-info solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
    <strong>Info!</strong> You have got 5 new email.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-warning solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
    <strong>Warning!</strong> Something went wrong. Please check.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-danger solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24 " height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> Message sending failed.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-dark solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> You successfully read this important alert message.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>
<div class="alert alert-light solid alert-dismissible fade show">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
    <strong>Error!</strong> You successfully read this message..
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
</div>

Square alerts

add .alert-square class to change the solid color.

Welcome! Message has been sent.

Done! Your profile photo updated.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message sending failed.

Error! You successfully read this important alert message.

Error! You successfully read this message..

<div class="alert alert-primary solid alert-square"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert alert-secondary solid alert-square"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert alert-success solid alert-square "><strong>Success!</strong> Message has been sent.</div>
<div class="alert alert-info solid alert-square "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert alert-warning solid alert-square "><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert alert-danger solid alert-square "><strong>Error!</strong> Message sending failed.</div>
<div class="alert alert-dark solid alert-square"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert alert-light solid alert-square"><strong>Error!</strong> You successfully read this message..</div>

Rounded alerts

add .alert-rounded class to change the solid color.

Welcome! Message has been sent.

Done! Your profile photo updated.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message sending failed.

Error! You successfully read this important alert message.

Error! You successfully read this message..

<div class="alert alert-primary solid alert-rounded"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert alert-secondary solid alert-rounded"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert alert-success solid alert-rounded "><strong>Success!</strong> Message has been sent.</div>
<div class="alert alert-info solid alert-rounded "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert alert-warning solid alert-rounded "><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert alert-danger solid alert-rounded "><strong>Error!</strong> Message sending failed.</div>
<div class="alert alert-dark solid alert-rounded"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert alert-light solid alert-rounded"><strong>Error!</strong> You successfully read this message..</div>

Dismissable Alerts

Bootstrap default style

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.

<div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

Alerts alt

add .alert-alt class to change the solid color.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.

<div class="alert alert-primary alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible alert-alt fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

Solid Alt

add .alert-alt.solid class to change the solid color.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.

<div class="alert alert-primary alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible alert-alt solid fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

Dismissable with solid

add .solid class to change the solid color.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.


    <div class="alert alert-primary solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Success!</strong> Message has been sent.
    </div>
    <div class="alert alert-secondary solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Success!</strong> Message has been sent.
    </div>
    <div class="alert alert-success solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Success!</strong> Message has been sent.
    </div>
    <div class="alert alert-info solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Info!</strong> You have got 5 new email.
    </div>
    <div class="alert alert-warning solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Warning!</strong> Something went wrong. Please check.
    </div>
    <div class="alert alert-danger solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Error!</strong> Message Sending failed.
    </div>
    <div class="alert alert-dark solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Error!</strong> Message Sending failed.
    </div>
    <div class="alert alert-light solid alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
        </button>
        <strong>Error!</strong> Message Sending failed.
    </div>

Alert with Link

Bootstrap default style

WOW! Eveything looks OK. Please check this one as well

Hey! Take a quick look. My birthday party

Warning! Why you did it to me! Check this out

Error! Something Went wrong Click here for details.


<div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
        well</a>
</div>

<div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
        well</a>
</div>

<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>WOW! Eveything looks OK.</strong> <a href="#">Please check this one as
        well</a>
</div>

<div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Hey! Take a quick look.</strong> <a href="#">My birthday party</a>
</div>
<div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Why you did it to me! <a href="#">Check this out</a>
</div>
<div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>
<div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>
<div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#">Click here for details.</a>
</div>

Alert with Link and solid color

add .solid class to change the solid color.

WOW! Eveything looks OK. upgrade

Hey! Take a quick look. upgrade

Warning! Why you did it to me! upgrade

Error! Something Went wrong upgrade


<div class="alert alert-primary solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-primary ms-1">upgrade</a>
</div>
<div class="alert alert-secondary solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-secondary ms-1">upgrade</a>
</div>
<div class="alert alert-success solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> WOW! Eveything looks OK. <a href="#" class="badge badge-sm light badge-success ms-1">upgrade</a>
</div>

<div class="alert alert-info solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Hey! Take a quick look. <a href="#" class="badge badge-sm light badge-info ms-1">upgrade</a>
</div>
<div class="alert alert-warning solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Why you did it to me! <a href="#" class="badge badge-sm light badge-warning ms-1">upgrade</a>
</div>
<div class="alert alert-danger solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-danger ms-1">upgrade</a>
</div>
<div class="alert alert-dark solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-dark ms-1">upgrade</a>
</div>
<div class="alert alert-light solid alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Something Went wrong <a href="#" class="badge badge-sm light badge-light ms-1">upgrade</a>
</div>

Inline Notifications

Default inline notification

Success! Vampires The Romantic Ideology Behind Them

The following article covers a topic that has recently moved to center stage-at lease it seems that way.

Success! Vampires The Romantic Ideology Behind Them

The following article covers a topic that has recently moved to center stage-at lease it seems that way.

Success! Vampires The Romantic Ideology Behind Them

The following article covers a topic that has recently moved to center stage-at lease it seems that way.

Success! Vampires The Romantic Ideology Behind Them

The following article covers a topic that has recently moved to center stage-at lease it seems that way.

Success! Vampires The Romantic Ideology Behind Them

The following article covers a topic that has recently moved to center stage-at lease it seems that way.

Danger! Religion And Science

What is the loop of Creation? How is there something from nothing? In spite of the fact..

Danger! Religion And Science

What is the loop of Creation? How is there something from nothing? In spite of the fact..

Danger! Religion And Science

What is the loop of Creation? How is there something from nothing? In spite of the fact..

<div class="row">
    <div class="col-xl-6">
        <div class="alert alert-primary notification">
            <p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
            <p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
            <button class="btn btn-primary btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-secondary notification">
            <p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
            <p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
            <button class="btn btn-secondary btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-success notification">
            <p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
            <p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
            <button class="btn btn-success btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-info notification">
            <p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
            <p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
            <button class="btn btn-info btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-warning notification">
            <p class="notificaiton-title mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
            <p>The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
            <button class="btn btn-warning btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-danger notification">
            <p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
            </p>
            <p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
            <button class="btn btn-danger btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-dark notification">
            <p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
            </p>
            <p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
            <button class="btn btn-dark btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-light notification">
            <p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
            </p>
            <p>What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
            <button class="btn btn-dark btn-sm">Confirm</button>
            <button class="btn btn-link btn-sm">Cancel</button>
        </div>
    </div>
</div>

Alert Icon Left

add .alert-end-icon to change the style

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.

<div class="alert alert-primary solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-account-search"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-secondary solid alert-end-icon alert-dismissible fade show">
    <span><i class="icon icon-bell-53"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-success solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-check"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-info solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-email"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Info! You have got 5 new email.
</div>
<div class="alert alert-warning solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-alert"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-help"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-settings"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light solid alert-end-icon alert-dismissible fade show">
    <span><i class="mdi mdi-cogs"></i></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

Alert Outline

add .alert-outline-primary,secondary,success... to change the style

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.


    <div class="alert alert-outline-primary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-secondary alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-success alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Success! Message has been sent.
</div>
<div class="alert alert-outline-info alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button> Info! You have got 5 new email.
</div>
<div class="alert alert-outline-warning alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-outline-danger alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-dark alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-outline-light alert-dismissible fade show">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    </button>
    <strong>Error!</strong> Message Sending failed.
</div>

Alert Social

add .alert-social .facebook,.twitter,.linkedin,.google-plus to change the style


    <div class="row">
    <div class="col-xl-6">
        <div class="alert alert-social facebook alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
            </button>
            <div class="media">
                <div class="alert-social-icon">
                    <span><i class="mdi mdi-facebook"></i></span>
                </div>
                <div class="media-body">
                    <h5 class="mt-1 mb-2 text-white">Facebook</h5>
                    <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-social twitter alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
            </button>
            <div class="media">
                <div class="alert-social-icon">
                    <span><i class="mdi mdi-twitter"></i></span>
                </div>
                <div class="media-body">
                    <h5 class="mt-1 mb-2 text-white">Twitter</h5>
                    <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-social linkedin alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
            </button>
            <div class="media">
                <div class="alert-social-icon">
                    <span><i class="mdi mdi-linkedin"></i></span>
                </div>
                <div class="media-body">
                    <h5 class="mt-1 mb-2 text-white">Linkedin</h5>
                    <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="alert alert-social google-plus alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
            </button>
            <div class="media">
                <div class="alert-social-icon">
                    <span><i class="mdi mdi-google-plus"></i></span>
                </div>
                <div class="media-body">
                    <h5 class="mt-1 mb-2 text-white">Google Plus</h5>
                    <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                </div>
            </div>
        </div>
    </div>
</div>