Alertas

Apresente mensagens contextuais para ações típicas dos usuários, usando este punhado flexível de mensagens de alerta.

Exemplos

Alertas estão disponíveis para qualquer tamanho de texto, assim como um botão de dispersão opcional. Para uma estilização adequada, use uma das oito requeridas classes contextuais (ex: .alert-success). Para dispersão inline, use o plugin jQuery alerts.

<div class="alert alert-primary" role="alert">
  Um simples alerta primary. Olha só!
</div>
<div class="alert alert-secondary" role="alert">
  Um simples alerta secondary. Olha só!
</div>
<div class="alert alert-success" role="alert">
  Um simples alerta success. Olha só!
</div>
<div class="alert alert-danger" role="alert">
  Um simples alerta danger. Olha só!
</div>
<div class="alert alert-warning" role="alert">
  Um simples alerta warning. Olha só!
</div>
<div class="alert alert-info" role="alert">
  Um simples alerta info. Olha só!
</div>
<div class="alert alert-light" role="alert">
  Um simples alerta light. Olha só!
</div>
<div class="alert alert-dark" role="alert">
  Um simples alerta dark. Olha só!
</div>
Transmitindo significado a tecnologias assistivas

Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.

Use a classe utilitária .alert-link para, rapidamente, conseguir cores de links que combinam com o alerta.

<div class="alert alert-primary" role="alert">
  Um simples alerta primary com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-secondary" role="alert">
  Um simples alerta secondary com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-success" role="alert">
  Um simples alerta success com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-danger" role="alert">
  Um simples alerta danger com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-warning" role="alert">
  Um simples alerta warning com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-info" role="alert">
  Um simples alerta info com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-light" role="alert">
  Um simples alerta light com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>
<div class="alert alert-dark" role="alert">
  Um simples alerta dark com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se quiser.
</div>

Conteúdo adicional

Alertas também podem conter elementos HTML adicionais como cabeçalhos, parágrafos e divisores.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Muito bem!</h4>
  <p>Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra você conseguir ver como o espaçamento dentro de um alerta funciona.</p>
  <hr>
  <p class="mb-0">Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.</p>
</div>

Dispersão

Usando o plugin JavaScript de alerta, é possível dispersar qualquer alerta inline, dessa forma:

  • Se assegure de carregar o plugin de alerta ou o JavaScript Bootstrap compilado;
  • Se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js;
    • A versão compilada já inclui ele.
  • Adicione um botão de dispersão e a classe .alert-dismissible, a qual adiciona padding extra a direita do alerta e posiciona o botão .close;
  • No botão de dispersão, use o atributo data-dismiss="alert", o qual aciona a funcionalidade JavaScript;
    • Tenha certeza de usar o elemento <button> com isso, para que ele se comporte em todos os dispositivos, adequadamente.
  • Para animar alertas quando dispersá-los, se assegure de usar as classes .fade e .show.

Você pode ver isso, em ação, com essa demonstração em tempo real:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Oloco, meu!</strong> Olha esse alerta animado, como é chique!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Comportamento JavaScript

Acionadores

Ative a dispersão de um alerta, usando JavaScript:

$('.alert').alert()

Também é possível, usando atributos data em um botão dentro do alerta, como vemos abaixo:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Perceba que dispersar um alerta irá removê-lo do DOM.

Métodos

Método Descrição
$().alert() Faz um alerta esperar por eventos de cliques em elementos descendentes, os quais possuem o atributo data-dismiss="alert" (não é necessário, quando usando a auto-inicialização do data-api).
$().alert('close') Fecha um alerta, removendo-o do DOM. Se as classes .fade e .show estão presentes no elemento, o alerta vai esmaecer antes de ser removido.
$().alert('dispose') Destroi o alerta de um elemento. 
$(".alert").alert('close')

Eventos

O plugin de alerta do Bootstrap usa alguns eventos para se ligar com a funcionalidade de alerta.

Evento Descrição
close.bs.alert Este evento é acionado, imediadatamente, quando a instância do método close é invocada.
closed.bs.alert Este evento é acionado quando o alerta é fechado (vai esperar a transição CSS se finalizada). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})