Modern Bootstrap 5 Alerts: Error, Warning, Info, and Success

Explore this responsive Bootstrap 5 alert snippet featuring custom borders and icons for error, warning, info, and success alerts. Perfect for modern web designs.

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_3">
   <div class="container">
      <div class="heading">
         <h1>bootstrap 5 alert</h1>
      </div>
      <div class="alert alert-danger alert-dismissible fade show shadow mb-4" role="alert">
         <div class="icon">
            <i class="bi bi-x-circle-fill"></i>
         </div>
         <div class="text">
            <h4>Error!</h4>
            <p class="mb-0"><strong>Lorem ipsum</strong> dolor, sit amet consectetur adipisicing elit. Ad,
               ullam.
            </p>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-warning alert-dismissible fade show shadow mb-4" role="alert">
         <div class="icon">
            <i class="bi bi-exclamation-triangle"></i>
         </div>
         <div class="text">
            <h4>Warning!</h4>
            <p class="mb-0">It is a long <strong>established fact</strong> that a reader will be distracted by
               the readable content
            </p>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-info alert-dismissible fade show shadow mb-4" role="alert">
         <div class="icon">
            <i class="bi-exclamation-circle-fill"></i>
         </div>
         <div class="text">
            <h4>Info!</h4>
            <p class="mb-0">There are many variations of passages of <strong>Lorem Ipsum</strong> available.</p>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      <div class="alert alert-success alert-dismissible fade show shadow" role="alert">
         <div class="icon">
            <i class="bi bi-check-circle-fill"></i>
         </div>
         <div class="text">
            <h4>Success!</h4>
            <p class="mb-0">The standard chunk of <strong>Lorem Ipsum</strong> used since the 1500s</p>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
   </div>
</section>

CSS

#alert_3 {
     margin-top: 70px;
     max-width: 70%;
     margin-left: auto;
     margin-right: auto;
}
 #alert_3 .alert {
     background: #fff;
     border: 0;
     border-left: 3px solid;
     border-radius: 0;
     display: flex;
     align-items: center;
}
 #alert_3 .alert-success{
     border-color: #43cd65;
     color: #43cd65;
}
 #alert_3 .alert-danger{
     border-color: #ef431c;
     color: #ef431c;
}
 #alert_3 .alert-info{
     border-color: #2a82db;
     color: #2a82db;
}
 #alert_3 .alert-warning{
     border-color: #f4b421;
     color: #f4b421;
}
 .alert-dismissible .btn-close{
     top: 50%;
     transform: translateY(-50%);
     font-size: 12px;
}
 #alert_3 .heading h1 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 30px;
     text-transform: capitalize;
}
 #alert_3 .icon {
     flex: 0 0 40px;
     width: 40px;
}
 #alert_3 i.bi {
     margin-right: 5px;
     font-size: 20px;
}
 #alert_3 button {
     box-shadow: none;
}
 #alert_3 h4 {
     font-size: 20px;
     margin-bottom: 5px;
     color: #000;
}
 #alert_3 p {
     color: #000;
}
 @media (max-width: 767.9px) {
     #alert_3 {
         margin-top: 50px;
         max-width: 100%;
    }
}

JS

Width:

Height:

Elevate your website's user experience with our modern Bootstrap 5 alerts. Designed with a clean aesthetic, these alerts come in four styles—Error, Warning, Info, and Success—each with a distinct border color and icon for quick visual identification. The alerts feature a no-border look, with bold colors and customizable icons to match your design. Easy to integrate and highly responsive, these alerts ensure your messages stand out. Perfect for communicating important information or warnings to users, our Bootstrap 5 alerts blend functionality with a polished, modern appearance for any web project.

Make a Comment

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

Related Snippet

Responsive Icon Box Snippet for Website Icon Sections Boost Your Design

Responsive Icon Box Snippet for Website Icon Sections Boost Your Design

17-Sep-2024 Updated : 17-Sep-2024

Minimalist Call to Action Snippet with Dark Theme Using Bootstrap 5

Minimalist Call to Action Snippet with Dark Theme Using Bootstrap 5

26-Aug-2024 Updated : 26-Aug-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

Elegant Call to Action Snippet with HTML, CSS & Bootstrap 5 for Web Design

Elegant Call to Action Snippet with HTML, CSS & Bootstrap 5 for Web Design

26-Aug-2024 Updated : 26-Aug-2024

Snippets Categories