Default Alert

Code Here:


									
<div class="alert alert-primary" role="alert">
    <strong>Primary - </strong> A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
    <strong>Secondary - </strong> A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    <strong>Success - </strong> A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
    <strong>Error - </strong> A simple danger alert—check it out!
</div>
<div class="alert alert-warning bg-warning text-white border-0" role="alert">
    <strong>Warning - </strong> A simple warning alert—check it out!
</div>
<div class="alert alert-info bg-info text-white border-0" role="alert">
    <strong>Info - </strong> A simple info alert—check it out!
</div>
<div class="alert alert-light bg-light text-dark border-0" role="alert">
    <strong>Light - </strong> A simple light alert—check it out!
</div>
<div class="alert alert-dark bg-dark text-white border-0 mb-0" role="alert">
    <strong>Dark - </strong> A simple dark alert—check it out!
</div>

									
								

Dismissing Alerts

Code Here


									

<div class="alert alert-primary alert-dismissible bg-primary text-white border-0 fade show"
    role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Primary - </strong> A simple primary alert—check it out!
</div>
<div class="alert alert-secondary alert-dismissible bg-secondary text-white border-0 fade show"
    role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Secondary - </strong> A simple secondary alert—check it out!
</div>
<div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show"
    role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Success - </strong> A simple success alert—check it out!
</div>
<div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show"
    role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Error - </strong> A simple danger alert—check it out!
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Warning - </strong> A simple warning alert—check it out!
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Info - </strong> A simple info alert—check it out!
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Light - </strong> A simple light alert—check it out!
</div>
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Dark - </strong> A simple dark alert—check it out!
</div>

									
								

Custom Alerts

Code Here


									
<div class="alert alert-primary bg-white text-primary" role="alert">
    This is a <strong>primary</strong> alert—check it out!
</div>

<div class="alert alert-success" role="alert">
    <i class="dripicons-checkmark mr-2"></i> This is a <strong>success</strong> alert -
    check it out!
</div>
<div class="alert alert-danger" role="alert">
    <i class="dripicons-wrong mr-2"></i> This is a <strong>danger</strong> alert - check
    it out!
</div>
<div class="alert alert-warning" role="alert">
    <i class="dripicons-warning mr-2"></i> This is a <strong>warning</strong> alert -
    check it out!
</div>
<div class="alert alert-info" role="alert">
    <i class="dripicons-information mr-2"></i> This is a <strong>info</strong> alert -
    check it out!
</div>

									
								

Additional content

Code Here


									
<div class="alert alert-success" role="alert">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text
        is going to run a bit longer so that you can see how spacing within an alert
        works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things
        Severny and tidy.</p>
</div>


									
								
All Rights Reserved by Severny. Designed and Developed by WrapPixel.