<div class="alert alert-success" role="alert">Soy una alerta de Éxito! Aparezco cuando se ha ejecutado una acción satisfactoriamente.</div>

<div class="alert alert-danger" role="alert">Soy una alerta de Error o Peligro! Aparezco cuando una acción no se ha ejecutado o cuando ha ocurrido un error.</div>

<div class="alert alert-warning" role="alert">Soy una alerta de Advertencia! Aparezco para avisar al usuario de un mensaje importante antes de hacer una acción.</div>

<div class="alert alert-info" role="alert">Soy una alerta de Información! Aparezco para proporcionar al usuario de información útil.</div>

<div class="alert alert-{primary, secondary ...}" role="alert">...</div>

<div class="alert alert-success" role="alert">Soy una alerta de Éxito! En mi contenido llevo <a href="#" class="alert-link">un enlace</a>. Puedes hacer click.</div>

<div class="alert alert-danger" role="alert">Soy una alerta de Error o Peligro! En mi contenido llevo <a href="#" class="alert-link">un enlace</a>. Puedes hacer click.</div>

<div class="alert alert-warning" role="alert">Soy una alerta de Advertencia! En mi contenido llevo <a href="#" class="alert-link">un enlace</a>. Puedes hacer click.</div>

<div class="alert alert-info" role="alert">Soy una alerta de Información! En mi contenido llevo <a href="#" class="alert-link">un enlace</a>. Puedes hacer click.</div>

<div class="alert alert-success" role="alert">

    <h4 class="alert-heading">Enhorabuena!</h4>

    <p>Perfecto, haz leído con éxito esta alerta. Este texto es un poco mas largo, para que puedas ver como se ajusta el contenido del componente a su contenedor.</p>

    <hr>

    <p class="mb-0">Siempre que lo necesite, usa las utilidades de margen para mantener las cosas ordenadas.</p>

</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">

    <strong>Perfecto!</strong> Lo haz logrado a la primera.

    <button type="button" class="btn btn-white btn-icon close" data-dismiss="alert" aria-label="Close">

        <span class="icon-close text-success" aria-hidden="true"></span>

    </button>

</div>