DocsAllOver Bootstrap 5 Alerts for Error, Warning, Info, and Success Snippets

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

April 4, 2025

Bootstrap, Bootstrap 5, Clean UI, Ecommerce, Notification

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bootstrap 5 Alerts for Error, Warning, Info, and Success</title>
   <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">
</head>

<body>
   <section id="alert_2">
      <div class="container">
         <div class="heading">
            <h1>Bootstrap 5 Alert Box</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>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

#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;
}

//Doesn't require any JS.

This Bootstrap 5 snippet implements a set of clear and informative alert messages, delivering essential feedback to users for various application states. The alerts provide contextual information for errors, warnings, informational updates, and successful actions.

Features:

Contextual Alert Types: Provides distinct alerts for error, warning, informational, and success scenarios.
Bootstrap 5 Integration: Leverages Bootstrap 5's alert components and utility classes for consistent styling and layout.
Clear Visual Cues: Uses Bootstrap 5's predefined alert styles to visually differentiate alert types.
Responsive Design: Ensures alerts are displayed consistently and effectively across all screen sizes.
Easy Implementation: Offers a straightforward way to incorporate essential user feedback into any Bootstrap 5 project.
Customizable Appearance: Allows for customization of alert styles using Bootstrap 5's utility classes and custom CSS.

Implementation:

Include Bootstrap 5: Ensure Bootstrap 5 CSS and JS files are included in your project.
Structure the HTML: Create alert elements using Bootstrap 5's alert classes and structure.
Apply Bootstrap Alert Classes: Use Bootstrap 5's contextual alert classes (alert-danger, alert-warning, alert-info, alert-success) to define alert types.
Add Alert Content: Populate the alerts with relevant messages and content.
Fine-Tune Customization: Modify Bootstrap 5's alert classes and add custom CSS to adjust appearance and behavior.

This snippet enables you to create and display clear, informative, and visually distinct alert messages, significantly enhancing the user experience and providing essential feedback within your Bootstrap 5 projects.

Latest Snippets

View All