Tạo Alert trong Bootstrap

Alert cơ bản

Alert tạo ra một Box mục đích chính là hiện thị một thông báo phản hồi nào đó. Tạo ra Alert bằng lớp .alert và định dạng Box với một trong các lớp .alert-{primary|secondary|success|warning|info|light|dark}

Ví dụ:

<div class="alert alert-primary" role="alert">
    Đây là một hộp Alert
</div>

Thêm nút Close

Nội dung trình bày trong Alert có thể là các dòng text hoặc bất kỳ HTML nào, có thể kích hoạt JS để bấm vào một nút close đóng lại Alert bằng cách cho thêm thiết lập lớp .alert-dismissible mặc định hiện thị với lớp .fade .show. Sau đó bên trong cho thêm một nút bấm .close gán cho nó thuộc tính data-dismiss="alert"

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Xin chào!</strong> Thông báo này hiện thị là do .alert
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Thêm tiêu đề

Dùng lớp .alert-heading để tạo tiêu đề

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <h4 class="alert-heading">Thông báo!</h4>
    <strong>Xin chào!</strong> Thông báo này hiện thị là do .alert
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <hr>
    <p class="mb-0">Bấm vào nút bấm nhỏ để đóng Alert.</p>
</div>