Bootstrap 5 Alert Styles for Effective Notifications

Explore this Bootstrap 5 alert snippet featuring four types of alerts—danger, warning, info, and success—with icons and dismiss buttons for user notifications.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<section id="alert_1">
   <div class="container">
      <div class="heading">
         <h1>bootstrap 5 alert</h1>
      </div>
      <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
         <p class="mb-0"><i class="bi bi-x-circle-fill"></i><strong>Lorem ipsum</strong> dolor, sit amet consectetur adipisicing elit. Ad, ullam.</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
         <p class="mb-0"><i class="bi bi-exclamation-triangle"></i>It is a long <strong>established fact</strong> that a reader will be distracted by the readable content</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-info alert-dismissible fade show mb-4" role="alert">
         <p class="mb-0"><i class="bi bi-exclamation-circle-fill"></i>There are many variations of passages of <strong>Lorem Ipsum</strong> available.</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-success alert-dismissible fade show" role="alert">
         <p class="mb-0"><i class="bi bi-check-circle-fill"></i>The standard chunk of <strong>Lorem Ipsum</strong> used since the 1500s</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
   </div>
</section>

CSS

JS

Width:

Height:

Explore a range of Bootstrap 5 alert components designed for effective notifications on your website. This example includes responsive styles for error, warning, info, and success alerts, complete with close buttons and icon indicators. Perfect for enhancing user experience with clear and actionable messages.

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Modern Bootstrap 5 Sticky Navbar with Dropdowns

Modern Bootstrap 5 Sticky Navbar with Dropdowns

10-Oct-2024 Updated : 10-Oct-2024

Free Responsive Lightbox Image Gallery Template | Image Gallery Snippet

Free Responsive Lightbox Image Gallery Template | Image Gallery Snippet

18-Sep-2024 Updated : 18-Sep-2024

Modern Responsive Bootstrap Table Snippet | Bootstrap Component for Website Snippets

Modern Responsive Bootstrap Table Snippet | Bootstrap Component for Website Snippets

23-Sep-2024 Updated : 23-Sep-2024

Customizable Bootstrap 5 Header Snippet with Search and Icons

Customizable Bootstrap 5 Header Snippet with Search and Icons

25-Aug-2024 Updated : 09-Oct-2024

Snippets Categories