# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/alerts/#javascript-behavior

# Alerts

# Alert success - Bootstrap 4
snippet alesu
<div class="alert alert-success" role="alert">
    ${1:<strong>Well done!</strong> You successfully read this important alert message.}
</div>
endsnippet

# Alert info - Bootstrap 4
snippet alein
<div class="alert alert-info" role="alert">
    ${1:<strong>Heads up!</strong> This alert needs your attention, but it's not super important.}
</div>
endsnippet

# Alert warning - Bootstrap 4
snippet alewa
<div class="alert alert-warning" role="alert">
    ${1:<strong>Warning!</strong> Better check yourself, you're not looking too good.}
</div>
endsnippet

# Alert danger - Bootstrap 4
snippet aleda
<div class="alert alert-danger" role="alert">
    ${1:<strong>Oh snap!</strong> Change a few things up and try submitting again.}
</div>
endsnippet

# Alert success w/ link color - Bootstrap 4
snippet alesu
<div class="alert alert-success" role="alert">
    ${1:<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.}
</div>
endsnippet

# Alert info w/ link color - Bootstrap 4
snippet alein
<div class="alert alert-info" role="alert">
    ${1:<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.}
</div>
endsnippet

# Alert warning w/ link color - Bootstrap 4
snippet alewa
<div class="alert alert-warning" role="alert">
    ${1:<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.}
</div>
endsnippet

# Alert danger w/ link color - Bootstrap 4
snippet aleda
<div class="alert alert-danger" role="alert">
    ${1:<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.}
</div>
endsnippet

# Alert dismissing - Bootstrap 4
snippet aledis
<div class="alert alert-${2:success|info|warning|danger} alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    ${1:<strong>Holy guacamole!</strong> You should check in on some of those fields below.}
</div>
endsnippet