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 Bootstrap Table Snippet | Bootstrap Component for Table Section

Responsive Bootstrap Table Snippet | Bootstrap Component for Table Section

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

Dynamic Website Counter Snippet for Engaging Landing Pages

Dynamic Website Counter Snippet for Engaging Landing Pages

12-Sep-2024 Updated : 12-Sep-2024

Enhance Engagement with Social Media Chatbots

Enhance Engagement with Social Media Chatbots

07-Oct-2024 Updated : 07-Oct-2024

Elegant Bootstrap 5 Header Snippet with Social Icons and Contact Details

Elegant Bootstrap 5 Header Snippet with Social Icons and Contact Details

25-Aug-2024 Updated : 25-Aug-2024

Snippets Categories