Stylish Bootstrap 5 Alerts for Error, Warning, Info, and Success

Check out this Bootstrap 5 alert snippet featuring four styled alerts error, warning, info, and success with custom icons and dismiss buttons for enhanced UX.

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_2">
   <div class="container">
      <div class="heading">
         <h1>bootstrap 5 alert</h1>
      </div>
      <div class="row">
         <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="alert alert-danger alert-dismissible fade show shadow" role="alert">
               <div class="icon">
                  <i class="bi bi-ban"></i>
               </div>
               <div class="text">
                  <h4>Error!</h4>
                  <p>Lorem ipsum dolor sit amet consectetur.</p>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">Close</button>
               </div>
            </div>
         </div>
         <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="alert alert-warning alert-dismissible fade show shadow" role="alert">
               <div class="icon">
                  <i class="bi bi-exclamation-triangle"></i>
               </div>
               <div class="text">
                  <h4>Warning!</h4>
                  <p>Lorem ipsum dolor sit amet consectetur.</p>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">Close</button>
               </div>
            </div>
         </div>
         <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <div class="alert alert-info alert-dismissible fade show shadow" role="alert">
               <div class="icon">
                  <i class="bi bi-exclamation-circle-fill"></i>
               </div>
               <div class="text">
                  <h4>Info!</h4>
                  <p>Lorem ipsum dolor sit amet consectetur.</p>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">Close</button>
               </div>
            </div>
         </div>
         <div class="col-lg-3 col-md-6 col-sm-6 col-12">
            <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>Lorem ipsum dolor sit amet consectetur.</p>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">Close</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

CSS

#alert_2{
     margin-top: 70px;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
}
 #alert_2 .heading h1{
     text-align: center;
     margin-bottom: 50px;
     font-size: 30px;
     text-transform: capitalize;
}
 #alert_2 .alert{
     padding: 0;
     text-align: center;
     border: 0;
     border-radius: 10px;
}
 #alert_2 .alert button{
     background: no-repeat;
     position: relative;
     padding: 5px 10px;
     width: fit-content;
     height: auto;
     background: #58151c;
     color: #fff;
     border-radius: 20px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.8px;
     opacity: 1;
}
 #alert_2 .alert.alert-warning button{
     background: #664d03;
}
 #alert_2 .alert.alert-info button{
     background: #055160;
}
 #alert_2 .alert.alert-success button{
     background: #0a3622;
}
 #alert_2 .alert .text p{
     margin-bottom: 10px;
}
 #alert_2 .alert .text{
     background: #fff;
     padding: 20px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}
 #alert_2 .alert .icon{
     padding: 10px 0;
     font-size: 30px;
}

JS

Width:

Height:

Upgrade your website’s messaging with our Bootstrap 5 alerts. These stylish alerts offer four distinct types—Error, Warning, Info, and Success—each designed to provide clear, actionable feedback. With a modern design featuring icons, rounded corners, and customizable close buttons, these alerts enhance both functionality and visual appeal. The responsive layout ensures optimal display on all devices, from desktops to smartphones. Perfect for improving user interaction and ensuring important messages are effectively communicated, these Bootstrap 5 alerts are an essential addition to any modern web design.

Make a Comment

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

Related Snippet

Responsive Sticky Bootstrap 5 Header with Menu

Responsive Sticky Bootstrap 5 Header with Menu

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

Responsive Lightbox Image Gallery Template | Free Image Gallery Snippet

Responsive Lightbox Image Gallery Template | Free Image Gallery Snippet

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

Responsive Bootstrap 5 Accordion for Interactive Content

Responsive Bootstrap 5 Accordion for Interactive Content

12-Aug-2024 Updated : 24-Aug-2024

Modern Bootstrap 5 Sticky Navbar with Dropdowns

Modern Bootstrap 5 Sticky Navbar with Dropdowns

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

Snippets Categories