부트스트랩4는 미리 정의된 알림(경고) 메시지를 쉽게 만들 수 있는 방법을 제공합니다.

알림(Alerts,경고)은 .alert클래스와 함께 문맥상 필요한 .alert-success, alert-info, alert-warning, alert-danger, alert-primary, alert-secondary, alert-light, .alert-dark클래스가 함께 사용됩니다.

<div class="alert alert-success">
    <strong>Success!</strong> 이 경고 상자는 성공 또는 긍정적 조치를 나타냅니다.
</div>

알림(Alert,경고) 링크

알림 상자의 모든 링크에는 .alert-link를 클래스를 추가하여 알림 상자 색상과 일치하는 링크를 만듭니다.

<div class="alert alert-success">
    <strong>Success!</strong> <a href="#" class="alert-link">실전홈페이지제작강좌</a>를 수강하면 모든 강좌가 무료입니다.
  </div>

알림(Alerts,경고) 닫기

알림(Alerts) 메시지를 닫으려면 알림 컨테이너에 .alert-dismissible클래스를 추가하십시오. 그런 다음 class="close"와 data-dismiss="alert"를 링크 또는 버튼 요소에 추가하십시오. (이 경고 상자를 클릭하면 경고 상자가 사라집니다.)

<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> 이 경고 상자는 성공 또는 긍정적 조치를 나타냅니다.
  </div>

** ×(x)는 'x'문자가 아닌 닫기 버튼을 의미에 선호되는 HTML 엔티티입니다.

HTML 엔티티에 대해서는 무료로 제공되는 HTML강좌를 참조하세요.

애니메이션 알림(Alerts, 경고)

.fade와 .show클래스는 알림 메시지를 닫을 때 페이드 효과를 추가합니다.

<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> 이 경고 상자는 성공 또는 긍정적 조치를 나타냅니다.
  </div>