Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

  1. Shortcodes
  2. Alerts

Alerts Messages

Alert success
Well done ! You successfully read this important alert message. 
<div class="alert alert-success">
    <i class="fa fa-check-square-o"></i> <strong>Well done !</strong> You successfully read this important alert message.
</div>
Alert info
Heads up ! This alert needs your attention, it's super important. 
<div class="alert alert-info">
    <i class="fa fa-info"></i> <strong>Heads up !</strong> This alert needs your attention, it's super important.
</div>
Alert warning
Warning ! Better check yourself, you're not looking too good. 
<div class="alert alert-warning">
    <i class="fa fa-warning"></i> <strong>Warning !</strong> Better check yourself, you're not looking too good.
</div>
Alert danger
Oh snap ! Change a few things up and try submitting again. 
<div class="alert alert-danger">
    <i class="fa fa-flash"></i> <strong>Oh snap !</strong> Change a few things up and try submitting again.
</div>

Dismissable Alerts

Alert success
<div class="alert alert-success alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span>×</span></button>
    <i class="fa fa-check-square-o"></i> <strong>Well done !</strong> You successfully read this important alert message.
</div>
Alert info
<div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span>×</span></button>
    <i class="fa fa-info"></i> <strong>Heads up !</strong> This alert needs your attention, it's super important.
</div>
Alert warning
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span>×</span></button>
    <i class="fa fa-warning"></i> <strong>Warning !</strong> Better check yourself, you're not looking too good.
</div>
Alert danger
<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span>×</span></button>
    <i class="fa fa-flash"></i> <strong>Oh snap !</strong> Change a few things up and try submitting again.
</div>

Alerts Custom

Alert success custom
Well done ! You successfully read this important alert message. 
<div class="alert alert-custom alert-success">
    <div class="alert-icon">
        <i class="fa fa-check-square-o"></i>
    </div>
    <div class="alert-content">
        <strong>Well done !</strong> You successfully read this important alert message.
    </div>
</div>
Alert info custom
Heads up ! This alert needs your attention, it's super important. 
<div class="alert alert-custom alert-info">
    <div class="alert-icon">
        <i class="fa fa-info"></i>
    </div>
    <div class="alert-content">
        <strong>Heads up !</strong> This alert needs your attention, it's super important.
    </div>
</div>
Alert warning custom
Warning ! Better check yourself, you're not looking too good. 
<div class="alert alert-custom alert-warning">
    <div class="alert-icon">
        <i class="fa fa-warning"></i>
    </div>
    <div class="alert-content">
        <strong>Warning !</strong> Better check yourself, you're not looking too good.
    </div>
</div>
Alert danger custom
Oh snap ! Change a few things up and try submitting again. 
<div class="alert alert-custom alert-danger">
    <div class="alert-icon">
        <i class="fa fa-flash"></i>
    </div>
    <div class="alert-content">
        <strong>Oh snap !</strong> Change a few things up and try submitting again.
    </div>
</div>