English 中文 العربية 日本語 Português

Bootstrap: Componentes de Alerta

Última atualização: 2026-08-26

1. Introdução ao Curso

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) O Problema

Charlie está desenvolvendo um recurso de envio de ticket: uma caixa de alerta verde para envio bem-sucedido, uma vermelha para falha, um Toast que desaparece automaticamente após alguns segundos, e um Tooltip com explicações ao passar o mouse sobre os botões de ação.

(4) A Solução

Os usuários precisam de feedback imediato após uma ação—envio bem-sucedido, falha ao salvar, confirmação de exclusão ou sugestões de ação. O Bootstrap fornece três níveis diferentes de componentes de feedback: alertas, toasts e tooltips.

Entendimento: Alerta = feedback em posição fixa dentro da página, Toast = notificação temporária que aparece em um canto, Tooltip = dica de texto que aparece ao passar o mouse.

(5) O Benefício

Usar os componentes de feedback do Bootstrap oferece a experiência de feedback perfeita para o usuário em diferentes cenários.

2. Alertas

▶ Exemplo: Alertas Básicos

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alerta</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-primary" role="alert">Alerta primário - uma mensagem de informação simples.</div>
    <div class="alert alert-success" role="alert">Sucesso - suas alterações foram salvas.</div>
    <div class="alert alert-danger" role="alert">Perigo - algo deu errado.</div>
    <div class="alert alert-warning" role="alert">Atenção - verifique sua entrada.</div>
    <div class="alert alert-info" role="alert">Informação - novas atualizações disponíveis.</div>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Atenção!</strong> Este alerta pode ser fechado.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Muito bem!</h4>
      <p>Sua conta foi criada com sucesso.</p>
      <hr>
      <p class="mb-0">Verifique seu e-mail para o link de verificação.</p>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Cores de Alerta

Classe Semântica Uso
alert-primary Azul Informação geral
alert-success Verde Operação bem-sucedida
alert-danger Vermelho Erro/Falha
alert-warning Amarelo Aviso/Atenção
alert-info Ciano Mensagem informativa

(2) Alerta Dispensável

HTML 
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Erro!</strong> Corrija os campos destacados.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default. Chave: alert-dismissible abre espaço para o botão de fechar, btn-close é o próprio botão de fechar, e data-bs-dismiss="alert" aciona o fechamento.

3. Toast

HTML 
<button class="btn btn-primary" onclick="showToast()">Mostrar Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notificação</strong>
      <small>agora mesmo</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Olá, mundo! Esta é uma mensagem toast.
    </div>
  </div>
</div>

<script>
  function showToast() {
    var toast = new bootstrap.Toast(document.getElementById('liveToast'))
    toast.show()
  }
</script>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Estrutura do Toast

Elemento Classe Descrição
Contêiner toast-container Posicionado no canto da tela
Toast toast Cartão de toast individual
Cabeçalho toast-header Ícone + Título + Hora
Corpo toast-body Conteúdo da mensagem

(2) Configuração do Toast

HTML 
<div class="toast" data-bs-delay="3000">Ocultar automaticamente após 3 segundos</div>
<div class="toast" data-bs-autohide="false">Sem ocultar automático (usuário deve fechar)</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

4. Tooltips

HTML 
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Tooltip acima">Tooltip superior</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip à direita">Tooltip à direita</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip abaixo">Tooltip inferior</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip à esquerda">Tooltip à esquerda</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function(el) {
    return new bootstrap.Tooltip(el)
  })
</script>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

5. Popovers

HTML 
<button class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Título do Popover"
        data-bs-content="Este é o conteúdo do corpo do popover.">
  Clique para alternar o popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

6. Mais Exemplos de Componentes de Alerta

▶ Exemplo: Demonstração Completa de Alertas Dispensáveis

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alertas Dispensáveis</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Sucesso!</strong> Suas alterações foram salvas.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Erro!</strong> Verifique sua entrada e tente novamente.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Atenção!</strong> Sua sessão expirará em 5 minutos.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Aviso!</strong> Nova atualização de software disponível.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Central de Notificações Toast

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notificações Toast</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <button class="btn btn-success" onclick="showSuccessToast()">Notificação de Sucesso</button>
    <button class="btn btn-danger" onclick="showErrorToast()">Notificação de Erro</button>

    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
      <div id="successToast" class="toast" role="alert">
        <div class="toast-header text-white bg-success">
          <strong class="me-auto">✅ Sucesso</strong>
          <small>agora mesmo</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Seus dados foram salvos com sucesso!
        </div>
      </div>
      <div id="errorToast" class="toast" role="alert">
        <div class="toast-header text-white bg-danger">
          <strong class="me-auto">❌ Erro</strong>
          <small>agora mesmo</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Algo deu errado. Tente novamente.
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function showSuccessToast() {
      new bootstrap.Toast(document.getElementById('successToast')).show();
    }
    function showErrorToast() {
      new bootstrap.Toast(document.getElementById('errorToast')).show();
    }
  </script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Tooltips (Todas as Direções)

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Direções do Tooltip</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5 text-center">
    <div class="mb-4">
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip acima">
        Topo
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip à direita">
        Direita
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip abaixo">
        Baixo
      </button>
      <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip à esquerda">
        Esquerda
      </button>
    </div>
    <div>
      <button class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-html="true"
              title="<em>Tooltip</em> <b>Rico</b>">
        Tooltip em HTML
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function(el) {
      return new bootstrap.Tooltip(el)
    })
  </script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Popover com Conteúdo HTML

HTML 
<button class="btn btn-lg btn-primary me-2" data-bs-toggle="popover"
        title="Informações do Perfil"
        data-bs-content="<strong>Alice Chen</strong><br>Designer Sênior<br><span class='badge bg-success'>Online</span>"
        data-bs-html="true">
  Popover em HTML
</button>

<button class="btn btn-lg btn-outline-danger me-2" data-bs-toggle="popover"
        title="Confirmação de Exclusão"
        data-bs-content="Tem certeza? Esta ação não pode ser desfeita."
        data-bs-trigger="focus">
  Popover em Foco
</button>

<button class="btn btn-lg btn-secondary" data-bs-toggle="popover"
        title="Notificação"
        data-bs-content="Você tem 3 mensagens não lidas."
        data-bs-placement="bottom">
  Popover Inferior
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Fluxo de Seleção de Componente de Notificação

100% 
flowchart TD
    A[Precisa notificar o usuário] --> B{Importância da mensagem}
    B -->|Alta/Atenção imediata| C[Alert]
    B -->|Média/Precisa confirmação| D[Popover]
    B -->|Baixa/Temporária| E[Toast]
    C --> F{Exige ação do usuário?}
    F -->|Sim| G[Alerta dispensável alert-dismissible]
    F -->|Não| H[Alerta estático]
    E --> I{Ocultar automaticamente?}
    I -->|Sim| J[Padrão 5 segundos]
    I -->|Não| K[data-bs-autohide=false]
    D --> L{Método de disparo}
    L -->|Hover| M[Tooltip]
    L -->|Clique| N[Popover]

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Cor do Alerta Classe Semântica Cenário de Uso
Azul alert-primary Informação Anúncios do sistema, dicas
Verde alert-success Sucesso Operação concluída, salvamento bem-sucedido
Vermelho alert-danger Erro Operação falhou, exceção
Amarelo alert-warning Aviso Expira em breve, atenção
Ciano alert-info Dica Novos recursos, notificações de atualização
Config do Toast Atributo Efeito
Ocultar automático data-bs-autohide="true" Padrão, desaparece após alguns segundos
Fechar manual data-bs-autohide="false" Usuário deve clicar para fechar
Tempo de atraso data-bs-delay="3000" Desaparece após 3 segundos (milissegundos)
Animação ativada class="toast fade" Animação de entrada/saída
Contêiner de posição toast-container + posicionamento Fixo no canto da tela
Dimensão de Comparação Tooltip Popover
Método de disparo Hover Clique
Volume de conteúdo Pequena quantidade de texto Título + Corpo + HTML
Direção top/right/bottom/left Igual à esquerda
Suporte a HTML Requer data-bs-html="true" Requer data-bs-html="true"
Método de fechar Desaparece ao afastar Clicar novamente ou pressionar Esc
Cenário típico Descrições de ícones, explicações de abreviações Dicas de formulário, prévias de detalhes

❓ Perguntas Frequentes

P: Por que meu Tooltip não está aparecendo? R: O motivo mais comum: o JavaScript não foi inicializado! Tooltips não funcionam automaticamente; você deve executar new bootstrap.Tooltip(element) ou o código de inicialização em lote.

P: Para que serve o role="alert" em um Alerta? R: É um atributo de acessibilidade que informa aos leitores de tela que esta é uma mensagem importante. Recomenda-se sempre incluí-lo.

P: Para quais cenários o Toast e o Alert são adequados, cada um? R: O Toast é adequado para notificações passivas e de baixa interferência—não bloqueia as ações do usuário e desaparece automaticamente após alguns segundos. O Alert é adequado para informações que exigem a atenção do usuário—permanece na página até que o usuário o feche.

P: Vários Toasts se empilham quando aparecem ao mesmo tempo? R: Sim. Vários Toasts se empilham verticalmente no toast-container na ordem em que aparecem, com o mais recente no topo. Cada Toast tem seu próprio temporizador independente e não afeta os outros.

P: O role="alert" em uma caixa de alerta interrompe a leitura atual em um leitor de tela? R: Sim. role="alert" é uma região ativa, e a maioria dos leitores de tela lerá seu conteúdo imediatamente, interrompendo o que estiver sendo lido. Este é exatamente o efeito pretendido para alertas. Se quiser reduzir o nível de interferência, o uso de Toast é recomendado.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um fluxo de feedback de envio de formulário: exiba um Alerta verde dispensável para envio bem-sucedido, e um Alerta vermelho para envio falhado.
  2. ⭐⭐ Implemente uma "Notificação de Nova Mensagem" com Toast: clicar em um botão dispara um Toast que exibe "Nova mensagem de Alice" e desaparece automaticamente após 3 segundos.
  3. ⭐⭐⭐ Coloque 5 botões de ícone de link de redes sociais em uma página. O Tooltip de cada botão deve exibir o nome da plataforma correspondente, com a direção definida consistentemente como inferior.

Lição Anterior: Carrossel e Modal · Próxima Lição: Accordion

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%