Alerts Bootstrap

Alerts in Bootstrap 4 are used to provide feedback messages to users. These can be success, warning, error, or informational messages. Alerts can be customized and closed by users if needed. Here’s a detailed explanation along with examples:

Basic Alert

To create a basic alert, use the .alert class along with contextual classes such as .alert-success, .alert-danger, .alert-warning, and .alert-info.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 4 Alerts</title>
</head>
<body>

  <!-- Success Alert -->
  <div class="alert alert-success" role="alert">
    This is a success alert—check it out!
  </div>

  <!-- Danger Alert -->
  <div class="alert alert-danger" role="alert">
    This is a danger alert—check it out!
  </div>

  <!-- Warning Alert -->
  <div class="alert alert-warning" role="alert">
    This is a warning alert—check it out!
  </div>

  <!-- Info Alert -->
  <div class="alert alert-info" role="alert">
    This is an info alert—check it out!
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Dismissible Alert

To make an alert dismissible, add the .alert-dismissible class along with a close button using the .close class.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <title>Dismissible Bootstrap 4 Alerts</title>
</head>
<body>

  <!-- Dismissible Success Alert -->
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    This is a success alert—check it out!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Alert with Additional Content

Alerts can also contain additional HTML elements like headings, paragraphs, and dividers.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 4 Alerts with Additional Content</title>
</head>
<body>

  <!-- Alert with Additional Content -->
  <div class="alert alert-warning" role="alert">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Colored Alerts

Bootstrap 4 also provides various color schemes for alerts to indicate the nature of the message.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 4 Colored Alerts</title>
</head>
<body>

  <!-- Primary Alert -->
  <div class="alert alert-primary" role="alert">
    This is a primary alert—check it out!
  </div>

  <!-- Secondary Alert -->
  <div class="alert alert-secondary" role="alert">
    This is a secondary alert—check it out!
  </div>

  <!-- Dark Alert -->
  <div class="alert alert-dark" role="alert">
    This is a dark alert—check it out!
  </div>

  <!-- Light Alert -->
  <div class="alert alert-light" role="alert">
    This is a light alert—check it out!
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

These examples cover the basic usage of alerts in Bootstrap 4, including making them dismissible and adding additional content. For more customization, you can always refer to the Bootstrap documentation.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us