Bootstrap предлагает простой способ создания стилизованного окна с уведомлением через соответствующий компонент.
Чтобы создать уведомление, используйте класс .alert вместе с одним из классов .alert-* для указания типа уведомления.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="alert alert-success" role="alert">Уведомление об успехе</div>
<div class="alert alert-info" role="alert">Информация</div>
<div class="alert alert-warning" role="alert">Предупреждение</div>
<div class="alert alert-danger" role="alert">Уведомление об опасности</div>
<div class="alert alert-light" role="alert">Светлая тема</div>
<div class="alert alert-dark" role="alert">Тёмная тема</div>
Закрытие уведомления
Вы можете создать закрывающиеся уведомления, добавив класс .alert-dismissible вместе с кнопкой «Закрыть». Когда пользователь щёлкает по такой кнопке, уведомление исчезает.
Здесь мы используем × для создания иконки «Закрыть».
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
<span aria-hidden="true">×</span></button>
<strong>Поздравляем!</strong> Вы успешно завязали шнурки!
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Эффект затухания
Вы можете придать уведомлению небольшой эффект затухания при закрытии, добавив классы .fade и .show.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
<span aria-hidden="true">×</span></button>
<strong>Поздравляем!</strong> Вы успешно завязали шнурки!
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Уведомления со ссылками
Используйте класс .alert-link для элемента <a>, чтобы сопоставить цвет ссылки с текстом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
<span aria-hidden="true">×</span></button>
<strong>Поздравляем!</strong>
Теперь вы готовы к <a href="#" class="alert-link">следующим шнуркам</a>.
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>