Alertas

Básicos

<div class="alert alert-primary" role="alert"> O exemplo de um alerta primário </div>

<div class="alert alert-secondary" role="alert"> O exemplo de um alerta secundário </div>

<div class="alert alert-info" role="alert"> O exemplo de um alerta com informação adicional </div>

<div class="alert alert-warning" role="alert"> O exemplo de um alerta com chamada de atenção </div>

<div class="alert alert-success" role="alert"> O exemplo de um alerta com resposta positiva/sucesso </div>

<div class="alert alert-danger" role="alert"> O exemplo de um alerta com mensagem de erro </div>

<div class="alert alert-dark" role="alert"> O exemplo de um alerta neutro </div>

Adicionais

<div class="alert alert-info" role="alert"> <h4 class="alert-heading">Alerta complexo</h4> <p>Lorem ipsum dolor sit amet, consectetur. </p> <hr> <p class="mb-0">Rodapé</p> </div>

<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Alerta dispensável</strong> Alerta que pode ser fechado. <button type="button" class="close" data-dismiss="alert" aria-label="fechar"> <span aria-hidden="true">×</span> </button> </div>

<div class="alert alert-light bg-dark" role="alert"> Alerta para dark mode </div>