HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Bootstrap 5 provides an easy way to create predefined alert messages
Bootstrap 5 provides an easy way to create predefined alert messages:
Alerts are created with the .alert
class, followed by one of the
contextual classes .alert-success
, .alert-info
, .alert-warning
,
.alert-danger
, .alert-primary
, .alert-secondary
, .alert-light
or .alert-dark
:
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Add the .alert-link
class to any links inside the alert box to create "matching colored links":
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
To close the alert message, add a .alert-dismissible
class to the alert container. Then add class="btn-close"
and data-bs-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).
<div class="alert alert-success alert-dismissible">
<button
type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>
The .fade
and .show
classes adds a fading effect when
closing the alert message:
<div class="alert alert-danger
alert-dismissible fade show">