Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.
This is standard priority information.
This is high priority information, the user may want to take action.
An action has been taken successfully.
This is warning information.
This is error information, an action was unsuccessful.
This is a primary alert and will change color based on the theme.
This is a secondary alert and will change color based on the theme.
No Data
This alert is used when there is no data for a specific panel, or data has yet to be configured.
<!-- ALERT GRAY -->
<div class="alert alert-gray">
<p>Text</p>
</div>
<!-- ALERT INFO -->
<div class="alert alert-info">
<p>Text</p>
</div>
<!-- ALERT SUCCESS -->
<div class="alert alert-success">
<p>Text</p>
</div>
<!-- ALERT WARNING -->
<div class="alert alert-warning">
<p>Text</p>
</div>
<!-- ALERT DANGER -->
<div class="alert alert-danger">
<p>Text</p>
</div>
<!-- ALERT PRIMARY -->
<div class="alert alert-primary">
<p>Text</p>
</div>
<!-- ALERT SECONDARY -->
<div class="alert alert-secondary">
<p>Text</p>
</div>
<!-- ALERT NO RESULTS -->
<div class="alert alert-no-results">
<p>Text</p>
</div>
This is standard priority information. Text Link
This is high priority information, the user may want to take action. Text Link
An action has been taken successfully. Text Link
This is warning information. Text Link
This is error information, an action was unsuccessful. Text Link
This is a primary alert and will change color based on the theme. Text Link
This is a secondary alert and will change color based on the theme. Text Link
No Data
This alert is used when there is no data for a specific panel, or data has yet to be configured.
<div class="alert alert-gray">
<p>Text. <a href"#" target"_self">Text Link</a></p>
</div>
<div class="alert alert-gray alert-icon">
<p>Text</p>
</div>
<div class="alert alert-gray alert-icon">
<div class="row align-items-center">
<div class="col-12 col-sm-9 col-xl-10">
<p class="mb-md-0">Text</p>
</div>
<div class="col-12 col-sm-3 col-xl-2">
<button type="button" class="btn btn-xs btn-primary w-100">Text</button>
</div>
</div>
</div>
<div class="alert alert-gray alert-icon alert-dismissible fade show" role="alert">
<div class="row align-items-center">
<div class="col-12 col-sm-9 col-xl-10">
<p class="mb-md-0">Text</p>
</div>
<div class="col-12 col-sm-3 col-xl-2">
<button type="button" class="btn btn-xs btn-outline btn-primary w-100" data-bs-dismiss="alert" aria-label="Close">Dismiss</button>
</div>
</div>
</div>
<div class="alert alert-gray alert-icon alert-dismissible fade show" role="alert">
<div class="row align-items-center">
<div class="col-12 col-md-7 col-lg-8 col-xl-9">
<p class="mb-md-0">Text</p>
</div>
<div class="col-12 col-md-5 col-lg-4 col-xl-3">
<div class="row gx-1 gy-2 align-items-center">
<div class="col-12 col-sm-6 col-md-4 col-lg-5 order-2 order-sm-1">
<button type="button" class="btn btn-xs btn-outline btn-primary w-100" data-bs-dismiss="alert" aria-label="Close">Dismiss</button>
</div>
<div class="col-12 col-sm-6 col-md-8 col-lg-7 order-1 order-sm-2">
<button type="button" class="btn btn-xs btn-primary w-100">Text</button>
</div>
</div>
</div>
</div>
</div>