Customizable Bootstrap 5 Alerts for Modern Web Design

Discover a Bootstrap 5 alert snippet featuring stylish borders and icons. Perfect for error, warning, info, and success messages with responsive design.

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_4">
   <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_4 {
     margin-top: 70px;
     max-width: 70%;
     margin-left: auto;
     margin-right: auto;
}
 #alert_4 .alert {
     border: 0;
     border-left: 3px solid;
     border-radius: 0;
     display: flex;
}
 #alert_4 .alert-success{
     border-color: #008c4c;
     color: #008c4c;
}
 #alert_4 .alert-danger{
     border-color: #f62e40;
     color: #f62e40;
}
 #alert_4 .alert-info{
     border-color: #1496b2;
     color: #1496b2;
}
 #alert_4 .alert-warning{
     border-color: #9c7b11;
     color: #9c7b11;
}
 .alert-dismissible .btn-close{
     top: 30%;
     transform: translateY(-50%);
     font-size: 12px;
}
 #alert_4 .heading h1 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 30px;
     text-transform: capitalize;
}
 #alert_4 .icon {
     flex: 0 0 40px;
     width: 40px;
}
 #alert_4 i.bi {
     margin-right: 5px;
     font-size: 20px;
}
 #alert_4 button {
     box-shadow: none;
}
 #alert_4 h4 {
     font-size: 20px;
     margin-bottom: 5px;
     color: #000;
}
 #alert_4 p {
     color: #000;
}
 @media (max-width: 767.9px) {
     #alert_4 {
         margin-top: 50px;
         max-width: 100%;
    }
}

JS

Width:

Height:

Enhance your website with our customizable Bootstrap 5 alerts, tailored for modern web design. These alerts come in four styles—Error, Warning, Info, and Success—each with a unique border color and icon to convey different message types. The sleek design features a border-left style, making each alert stand out while blending seamlessly with your site's aesthetic. Easy to integrate and highly responsive, these alerts ensure clear and effective communication with users. Ideal for highlighting important messages or notifications, our Bootstrap 5 alerts combine functionality with a contemporary visual appeal for any web project.

Make a Comment

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

Related Snippet

Enhance Engagement with Social Media Chatbots

Enhance Engagement with Social Media Chatbots

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

Responsive Bootstrap 5 Sticky Header with Dropdown and Search Box

Responsive Bootstrap 5 Sticky Header with Dropdown and Search Box

09-Oct-2024 Updated : 09-Oct-2024

Interactive Swiper Slider with Custom Pagination and Dynamic Navigation

Interactive Swiper Slider with Custom Pagination and Dynamic Navigation

11-Aug-2024 Updated : 24-Aug-2024

Modern Login and Register Form with Bootstrap Snippet

Modern Login and Register Form with Bootstrap Snippet

27-Nov-2024 Updated : 27-Nov-2024

Snippets Categories