Alerta Bootstrap 5

Alerta

Bootstrap 5 oferece um método simples para criar mensagens de alerta pré-definidas:

As caixas de alerta são criadas usando a classe .alert, seguida por uma das classes de contexto:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Exemplo

<div class="alert alert-success">
  <strong>Concluído com sucesso!</strong> Esta caixa de alerta representa uma ação bem-sucedida ou positiva.
</div>

Experimente pessoalmente

Link de alerta

Adicionar .alert-link Adicione a classe a qualquer link dentro da caixa de alerta para criar um "link colorido correspondente":

Exemplo

<div class="alert alert-success">
  <strong>Concluído com sucesso!</strong> Você deve <a href="#" class="alert-link">ler esta mensagem</a>.
</div>

Experimente pessoalmente

Fechar alerta

Para fechar a mensagem de alerta, adicione .alert-dismissible Adicione a classe ao contêiner de alerta. Em seguida, class="btn-close" e data-bs-dismiss="alert" Adicione ao elemento de link ou botão (ao clicar, a caixa de alerta desaparecerá).

Exemplo

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Concluído com sucesso!</strong> Esta caixa de alerta representa uma ação bem-sucedida ou positiva.
</div>

Experimente pessoalmente

Animação de caixa de alerta

.fade e .show A classe é adicionada ao fechamento da mensagem de alerta com efeito de entrada e saída suave:

Exemplo

<div class="alert alert-danger alert-dismissible fade show">

Experimente pessoalmente