Podemos criar mensagens de alertas com Bootstrap. Uma mensagem de alerta é importante pois chama a atenção do usuário para uma informação importante, aviso ou erro.
Essa mensagem de alerta é uma notificação visual exibida em uma página ou aplicativo para transmitir mensagens relevantes ou críticas.
![Criando Mensagens de Alerta com Bootstrap](https://categoriaoutros.com.br/wp-content/uploads/2023/11/bootstrap-logo.png)
Classes de alerta de mensagens no bootstrap
Para criar mensagens de alerta com Bootstrap podemos usar a classe “.alert” e suas variantes, como “alert-success”, “alert-danger”, etc. Além disso, você pode usar a classe “alert-dismissible” para adicionar um botão de fechar. Consulte a documentação do Bootstrap para obter exemplos e mais detalhes.
As classes de alerta disponíveis no Bootstrap são:
- alert: classe base para um alerta.
- alert-primary: alerta com cor primária.
- alert-secondary: alerta com cor secundária.
- alert-success: alerta com cor de sucesso.
- alert-danger: alerta com cor de perigo.
- alert-warning: alerta com cor de aviso.
- alert-info: alerta com cor de informação.
- alert-light: alerta com cor clara.
- alert-dark: alerta com cor escura.
Essas classes podem ser combinadas com a classe alert-dismissible para adicionar um botão de fechar ao alerta.
Links de alerta no bootstrap
Podemos usar a classe .alert-link para para estilizar um link dentro de um componente de alerta. Logicamente que usamos essa classe com a tag de links <a href=”#”></a>
- .alert-link
<div class="alert alert-success alert-dismissible m-5" > <strong>Sucesso!</strong> Isso é um alerta com link e botão fechar.<a href="#"> ler mais...</a> </div>
Botão fechar nas classes de alertas do bootstrap
Podemos inserir um botão para fechar o alerta. Sim, ao clicarmos no botão o alerta irá desaparecer.
Dentro da div principal insira as classes .alert e .alert-dismissible
.
Em seguida, crie um botão HTML e dentro desse tag coloque as classes class=”btn-close” e data-bs-dismiss=”alert”
<div class="alert alert-success alert-dismissible m-5" > <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Sucesso!</strong> Isso é um alerta com botão fechar. </div>
Animação ao fechar mensagens com bootstrap
Podemos colocar uma animação ao clicarmos no botão para fechar o alerta:
<div class="alert alert-primary alert-dismissible fade show m-5"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Alerta!</strong> Isso é um alerta animado com cor primária. </div>
Dica: Veja outros posts sobre bootstrap clicando aqui.
Praticando mensagens de alerta com bootstrap
Irei postar as linhas e a seguir a imagem ilustrando o resultado de cada exemplo.
<div class="alert alert-success m-5"> <strong>Sucesso!</strong> Isso é um alerta de sucesso em uma ação. </div> <div class="alert alert-danger m-5"> <strong>Danger!</strong> Isso é um alerta crítico. </div> <div class="alert alert-info m-5"> <strong>Info!</strong> Isso é um alerta de informativo. </div> <div class="alert alert-dark m-5"> <strong>Dark!</strong> Isso é um alerta com cor escura. </div> <div class="alert alert-success alert-dismissible m-5" > <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Sucesso!</strong> Isso é um alerta com botão fechar. </div> <div class="alert alert-success alert-dismissible m-5" > <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Sucesso!</strong> Isso é um alerta com link e botão fechar.<a href="#"> ler mais...</a> </div> <div class="alert alert-primary alert-dismissible fade show m-5"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>Alerta!</strong> Isso é um alerta animado com cor primária. </div>
![](https://i.pinimg.com/736x/fd/20/25/fd202526ae9001eac1234c2341566bb3.jpg)