Bootstrap предлагает простой способ создания стилизованного блока уведомления с помощью специального компонента.
Чтобы создать блок уведомления, используйте класс .alert вместе с одним из классов .alert-* для указания типа уведомления.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="alert alert-primary" role="alert">Основное уведомление</div>
<div class="alert alert-secondary" role="alert">Вторичное уведомление</div>
<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. К кнопке закрытия добавьте атрибут data-bs-dismiss="alert". Обязательно используйте элемент <button> для правильного поведения на всех устройствах.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="alert alert-success alert-dismissible" role="alert">
<strong>Поздравляем!</strong> Вы успешно завязали шнурки!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Эффект плавного исчезновения
Вы можете придать уведомлениям при их закрытии лёгкий эффект исчезновения, добавив классы .fade и .show.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Поздравляем!</strong> Вы успешно завязали шнурки!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Уведомления со ссылками
Используйте класс .alert-link в теге <a>, чтобы цвет ссылки совпадал с цветом текста.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Поздравляем!</strong> Теперь вы готовы к <a href="#" class="alert-link">следующим шнуркам</a>.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>