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.
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>
