Bootstrap 5 é a versão principal mais recente do Bootstrap, onde a IU foi renovada e várias mudanças foram feitas. Os alertas fornecem mensagens de feedback contextual para ações típicas do usuário com um punhado de mensagens de alerta disponíveis e flexíveis. O bootstrap permite mostrar essas mensagens de alerta no site usando classes predefinidas. Cada uma das classes possui cores diferentes associadas a elas.

Sintaxe:

<div class="alert alert-type"> Contents of the alert... <div>

Tipos: há oito tipos de alertas disponíveis no Bootstrap 5. As classes desses alertas são fornecidas a seguir:

  • alerta primário
  • alerta secundário
  • alerta-sucesso
  • alerta-perigo
  • alerta-aviso
  • alert-info
  • luz de alerta
  • alerta escuro

Exemplo 1: Este exemplo mostra os primeiros quatro tipos de Alertas no Bootstrap 5.

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Bootstrap 5 | Alerts
    </title>
 
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
 
<body>
    <div style="text-align: center;
              width:600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
                          height: 200px;
                          margin: 20px;">
        <div class="alert alert-primary" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-secondary" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-success" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-danger" role="alert">
            GeeksforGeeks
        </div>
    </div>
</body>
 
</html>

Saída:

Exemplo 2: Este exemplo mostra os próximos quatro tipos de Alertas no Bootstrap 5.

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Bootstrap 5 | Alerts
    </title>
 
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
 
</head>
 
<body>
    <div style="text-align: center;
              width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
              height: 200px;
              margin: 20px;">
        <div class="alert alert-warning" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-info" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-light" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-dark" role="alert">
            GeeksforGeeks
        </div>
    </div>
</body>
 
</html>

Saída: