Bootstrap 4 / Alerts - 닫을 수 있는 메시지 만들기

Alert

Alert는 방문자에게 특정 메시지를 보여줄 때 주로 사용합니다. 메시지에 맞게 색을 고를 수 있으며, 닫기 버튼을 추가할 수 있습니다.

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alert 만들기

클래스의 값으로 'alert alert-primary' 등을 추가하면 Alert가 만들어집니다. primary, secondary alert, success, danger, warning, info, light, dark 8가지의 색을 제공합니다.

링크

클래스의 값으로 alert-link를 가진 링크를 넣으면 배경색에 어울리는 글자색을 가진 링크가 만들어집니다.

제목, 수평선, 문단

  • Alert 안에 h 요소를 넣고 싶다면 클래스의 값에 alert-heading를 추가합니다.
  • hr 요소로 수평선을 넣으면 배경색에 어울리는 색을 가진 수평선이 만들어집니다.
  • 내용을 p 요소로 만들면 p 요소 아래에 여백(margin)이 생깁니다. 마지막 p 요소의 클래스의 값에 mb-0을 추가하여 여백을 없애줍니다.

닫기 버튼

닫기 버튼을 쉽게 추가할 수 있습니다. 오른쪽의 X를 클릭하면 사라집니다.