Modern Bootstrap 5 Alert Styles for Effective Messaging

Explore a Bootstrap 5 alert snippet featuring distinct icons and border designs for error, warning, info, and success messages. Ideal for modern UI needs.

HTML

CSS

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

JS

Width:

Height:

Elevate your website's user experience with our modern Bootstrap 5 alert styles. Each alert type—Error, Warning, Info, and Success—features a distinct border and icon color to effectively communicate messages. The clean design includes a colored icon area and a flexible layout, making these alerts easy to integrate into any project. Perfect for notifying users of important updates or errors, these alerts combine functionality with a stylish appearance. Responsive and adaptable, they ensure clear communication on all devices, enhancing the overall user interaction with your site. Incorporate these alerts to maintain an engaging and informative user experience.