Menu Bài Viết:

Bootstrap 4 Alerts

Bootstrap 4 cung cấp một cách dễ dàng để tạo alert messages:

Các Alert được tạo bởi class .alert, sau đó ta cũng có các class .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark:

Ví dụ

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Alert Links

Bạn có thể thêm class alert-link cho link bên trong alert box:

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Closing Alerts (Đóng alert)

Để đóng hộp alert, bạn hãy thêm class .alert-dismissible. Sau đó thêm class="close" và data-dismiss="alert" để khi click vào nút đóng bên cạnh nó sẽ làm hộp alert biến mất.

Ví dụ

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Animated Alerts

Class .fade và .show tạo hiệu ứng fade khi đóng hộp alert:

Ví dụ

<div class="alert alert-danger alert-dismissible fade show">