View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu

Horizontalmenu Styles Mode

Color Menu
Light Menu
Dark Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Alerts

  1. Elements
  2. Alerts
Add Order Add User

Default alerts

<div class="alert alert-primary" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Primary alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-secondary" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Secondary alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-success" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Success alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-info" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Info alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-warning" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Warning alert—At vero eos et accusamus praesentium!
</div>
<div class="alert alert-danger" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Danger alert—At vero eos et accusamus praesentium!
</div>

Links in alerts

<div class="alert alert-success" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
</div>
<div class="alert alert-info" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>Heads up!</strong> This<a href="#" class="alert-link"> alert needs your attention,</a> but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>Warning! </strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good.</a>
</div>
<div class="alert alert-danger" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up </a>and try submitting again.
</div>

Alert with icon

Add .alert-icon class.

<div class="alert alert-success" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<i class="fa fa-check-circle-o ml-2" aria-hidden="true"></i> Well done! You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<i class="fa fa-bell-o ml-2" aria-hidden="true"></i>Heads up! This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<i class="fa fa-exclamation ml-2" aria-hidden="true"></i> Warning! Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<i class="fa fa-frown-o ml-2" aria-hidden="true"></i>Oh snap!Change a few things up and try submitting again.
</div>

Alert with avatar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="alert alert-avatar alert-primary alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/14.jpg"></span>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-avatar  alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/yoha/Horizontal-Light-rtl/assets/images/users/5.jpg"></span>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

Alerts With Icons

<div class="alert alert-default" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-download ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Default!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-primary" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-check-square ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Primary!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-success" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-thumbs-up ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Success!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-info" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-bell ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Info!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-warning" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-info ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>
<div class="alert alert-danger mb-0" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-slash ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Danger!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>

Alerts With Icons Dismissing

<div class="alert alert-default alert-dismissible fade show" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-download ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Default!</strong> This is a default alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
<div class="alert alert-primary alert-dismissible fade show" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-check-square ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-thumbs-up ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Success!</strong> This is a success alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-info ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-bell ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Info!</strong> This is a info alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>
<div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
	<span class="alert-inner--icon"><i class="fe fe-slash ml-2 float-right mt-1"></i></span>
	<span class="alert-inner--text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>

Alerts Popovers

<button type="button" class="btn btn-success btn-block" data-container="body" data-toggle="popover" data-popover-color="popsuccess" data-placement="bottom" title="alert sucess" data-content="Well done! You successfully read this important alert message..">
	Show success
</button>
<button type="button" class="btn btn-info btn-block" data-container="body" data-toggle="popover" data-popover-color="popinfo" data-placement="top" title="alert info" data-content="Heads up! This alert needs your attention, but it's not super important...">
	Show info
</button>
<button type="button" class="btn btn-block btn-warning" data-container="body" data-toggle="popover" data-popover-color="popwarning" data-placement="bottom" title="alert warning" data-content="Warning! Best check yo self, you're not looking too good..">
	Show warning
</button>
<button type="button" class="btn btn-block btn-danger" data-container="body" data-toggle="popover" data-popover-color="popdanger" data-placement="bottom" title="alert danger" data-content="Oh snap! Change a few things up and try submitting again.">
	Show danger
</button>
<button type="button" class="btn btn-block btn-secondary" data-container="body" data-toggle="popover" data-popover-color="popsecondary" data-placement="top" title="alert secondary" data-content="Error! Please Check u r emial id..">
	Show secondary
</button>
<button type="button" class="btn btn-block btn-primary" data-container="body"  data-toggle="popover" data-popover-color="pop-primary" data-placement="top" title="alert primary" data-content="Cool! This alert will close in 3 seconds. The data-delay attribute is in milliseconds.">
	Show primary
</button>

Alerts style

Success Message

You successfully read this important alert message.

<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	 <strong>Success Message</strong>
	<hr class="message-inner-separator">
	<p>You successfully read this important alert message.</p>
</div>
Info Message

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

<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>Info Message</strong>
	<hr class="message-inner-separator">
	<p>This alert needs your attention, but it's not super important.</p>
</div>
Warning Message

Best check yo self, you're not looking too good

<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	 <strong>Warning Message</strong>
	<hr class="message-inner-separator">
	<p>Best check yo self, you're not looking too good</p>
</div>
Danger Message

Change a few things up and try submitting again.

<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	 <strong>Danger Message</strong>
	<hr class="message-inner-separator">
	<p>Change a few things up and try submitting again.</p>
</div>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%