Skip to main content Skip to docs navigation
Ver en GitHub

Alertas

Proporciona mensajes de comentarios contextuales para las acciones típicas del usuario con un puñado de mensajes de alerta disponibles y flexibles.

En esta página

Ejemplos

Las alertas están disponibles para cualquier longitud de texto, así como con un botón de cierre opcional. Para un estilo adecuado, utiliza una de las ocho clases contextuales requeridas (por ejemplo, .alert-success). Para el descarte en línea, utiliza el plugin de JavaScript de alertas.

¡Atención! A partir de la v5.3.0, el mixin de Sass alert-variant() está en desuso (deprecated). Las variantes de alerta ahora tienen sus variables CSS anuladas en un bucle Sass.

html 
<div class="alert alert-primary" role="alert">
  Una alerta simple de tipo primary—¡compruébalo!
</div>
<div class="alert alert-secondary" role="alert">
  Una alerta simple de tipo secondary—¡compruébalo!
</div>
<div class="alert alert-success" role="alert">
  Una alerta simple de tipo success—¡compruébalo!
</div>
<div class="alert alert-danger" role="alert">
  Una alerta simple de tipo danger—¡compruébalo!
</div>
<div class="alert alert-warning" role="alert">
  Una alerta simple de tipo warning—¡compruébalo!
</div>
<div class="alert alert-info" role="alert">
  Una alerta simple de tipo info—¡compruébalo!
</div>
<div class="alert alert-light" role="alert">
  Una alerta simple de tipo light—¡compruébalo!
</div>
<div class="alert alert-dark" role="alert">
  Una alerta simple de tipo dark—¡compruébalo!
</div>

Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Ejemplo en vivo

Haz clic en el botón a continuación para mostrar una alerta (oculta con estilos en línea al principio), luego descártala (y destrúyela) con el botón de cierre incorporado.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Mostrar alerta en vivo</button>

Utilizamos el siguiente JavaScript para activar nuestra demostración de alerta en vivo:

site/src/assets/partials/snippets.js 
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success')
  })
}

Color de enlace

Utiliza la clase de utilidad .alert-link para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.

html 
<div class="alert alert-primary" role="alert">
  Una alerta simple de tipo primary con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-secondary" role="alert">
  Una alerta simple de tipo secondary con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-success" role="alert">
  Una alerta simple de tipo success con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-danger" role="alert">
  Una alerta simple de tipo danger con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-warning" role="alert">
  Una alerta simple de tipo warning con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-info" role="alert">
  Una alerta simple de tipo info con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-light" role="alert">
  Una alerta simple de tipo light con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>
<div class="alert alert-dark" role="alert">
  Una alerta simple de tipo dark con <a href="#" class="alert-link">un enlace de ejemplo</a>. Haz clic en él si lo deseas.
</div>

Contenido adicional

Las alertas también pueden contener elementos HTML adicionales como encabezados, párrafos y divisores.

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">¡Bien hecho!</h4>
  <p>¡Excelente! Leíste con éxito este importante mensaje de alerta. Este texto de ejemplo se va a extender un poco más para que puedas ver cómo funciona el espaciado dentro de una alerta con este tipo de contenido.</p>
  <hr>
  <p class="mb-0">Siempre que lo necesites, asegúrate de utilizar utilidades de margen para mantener todo limpio y ordenado.</p>
</div>

Iconos

De manera similar, puedes usar utilidades de flexbox y Bootstrap Icons para crear alertas con iconos. Dependiendo de tus iconos y contenido, es posible que desees agregar más utilidades o estilos personalizados.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    Un ejemplo de alerta con un icono
  </div>
</div>

¿Necesitas más de un icono para tus alertas? Considera usar más Bootstrap Icons y crear un sprite SVG local como este para hacer referencia fácilmente a los mismos iconos de forma repetida.

html 
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    Un ejemplo de alerta con un icono
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    Un ejemplo de alerta de éxito con un icono
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    Un ejemplo de alerta de advertencia con un icono
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    Un ejemplo de alerta de peligro con un icono
  </div>
</div>

Descarte

Usando el plugin de JavaScript de alerta, es posible descartar cualquier alerta en línea. Así es cómo:

  • Asegúrate de haber cargado el plugin de alerta o el archivo JavaScript compilado de Bootstrap.
  • Agrega un botón de cierre y la clase .alert-dismissible, que agrega espaciado (padding) adicional a la derecha de la alerta y posiciona el botón de cierre.
  • En el botón de cierre, agrega el atributo data-bs-dismiss="alert", que activa la funcionalidad de JavaScript. Asegúrate de usar el elemento <button> con él para un comportamiento adecuado en todos los dispositivos.
  • Para animar las alertas al descartarlas, asegúrate de agregar las clases .fade y .show.

Puedes ver esto en acción con una demostración en vivo:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>¡Santo guacamole!</strong> Deberías revisar algunos de esos campos a continuación.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
</div>

Cuando se descarta una alerta, el elemento se elimina por completo de la estructura de la página. Si un usuario de teclado descarta la alerta utilizando el botón de cierre, su enfoque se perderá repentinamente y, según el navegador, se restablecerá al inicio de la página/documento. Por esta razón, recomendamos incluir JavaScript adicional que escuche el evento closed.bs.alert y establezca mediante programación el focus() en la ubicación más adecuada de la página. Si planeas mover el enfoque a un elemento no interactivo que normalmente no recibe el enfoque, asegúrate de agregar tabindex="-1" al elemento.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, las alertas ahora usan variables CSS locales en .alert para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_alert.scss 
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;

Variables de Sass

scss/_variables.scss 
$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           var(--#{$prefix}border-radius);
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            var(--#{$prefix}border-width);
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Mixins de Sass

Obsoleto en v5.3.0
scss/mixins/_alert.scss 
@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: var(--#{$prefix}alert-link-color);
  }
}

Bucles Sass

Bucle que genera las clases modificadoras con una anulación de las variables CSS.

scss/_alert.scss 
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

Comportamiento de JavaScript

Inicializar

Inicializar elementos como alertas

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Con el único propósito de descartar una alerta, no es necesario inicializar el componente manualmente a través de la API de JS. Al hacer uso de data-bs-dismiss="alert", el componente se inicializará automáticamente y se descartará correctamente.

Consulte la sección de disparadores para obtener más detalles.

Disparadores

El descarte se puede lograr con el atributo data-bs-dismiss en un botón dentro del alert como se demuestra a continuación: 

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

o en un botón fuera del alert utilizando el data-bs-target adicional como se demuestra a continuación: 

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

Ten en cuenta que cerrar una alerta la eliminará del DOM.

Métodos

Puedes crear una instancia de alerta con el constructor de alertas, por ejemplo:

const bsAlert = new bootstrap.Alert('#myAlert')

Esto hace que una alerta escuche los eventos de clic en los elementos descendientes que tienen el atributo data-bs-dismiss="alert". (No es necesario cuando se utiliza la inicialización automática de la data-api).

MétodoDescripción
closeCierra una alerta eliminándola del DOM. Si las clases .fade y .show están presentes en el elemento, la alerta se desvanecerá antes de ser eliminada.
disposeDestruye la alerta de un elemento. (Elimina los datos almacenados en el elemento DOM)
getInstanceMétodo estático que te permite obtener la instancia de alerta asociada a un elemento DOM. Por ejemplo: bootstrap.Alert.getInstance(alert).
getOrCreateInstanceMétodo estático que devuelve una instancia de alerta asociada a un elemento DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: bootstrap.Alert.getOrCreateInstance(element).

Uso básico:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Eventos

El plugin de alerta de Bootstrap expone algunos eventos para conectarse a la funcionalidad de alerta.

EventoDescripción
close.bs.alertSe dispara inmediatamente cuando se llama al método de instancia close.
closed.bs.alertSe dispara cuando la alerta se ha cerrado y se han completado las transiciones CSS.
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // hacer algo, por ejemplo, mover explícitamente el enfoque al elemento más apropiado,
  // para que no se pierda/restablezca al inicio de la página
  // document.getElementById('...').focus()
})