Bootstrap 5 TutorialLesson 11Free preview

BS5 Alerts

This lesson is part of Bootstrap · All levels

Summary

Alert is a built-in Bootstrap message box to display brief information to users. The basic class .alert is blended with the theme colors such as .alert-success or .alert-danger, and can be made to close with the .btn-close button on .alert-dismissible. Add .alert-link so that the links in the alert follow the alert color.

Key points

.alert is a basic class; add a color variant such as .alert-primary.
.alert-dismissible displays the .btn-close button to close the message.
The data-bs-dismiss="alert" attribute closes the alert when the button is clicked.
.alert-link makes the senada link with the alert color.
.alert-heading gives a special title in the alert.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.