Bootstrap 4 Alerts Tutorial With Example

In Bootstrap 4 Alerts Tutorial With Example, you will learn how to create alerts messages with Bootstrap 4. Alert boxes are used very often to stand out the information that requires the immediate attention of the end users such as error, warning or confirmation messages.

Bootstrap 4 Alerts Tutorial With Example

Bootstrap provides an easy way to create an alert message box with its alert component. Using Bootstrap you can easily create simple alert messages box for various purposes. Specific pre-defined messages are created by applying the .alert class with a contextual class to provide the appearance of the container.

You can also add the optional close button to dismiss any alert.

#1: Bootstrap 4 Alerts

There are eight classes that are used within <div> element for alerts.

  • .alert-success 
  • .alert-info 
  • .alert-warning 
  • .alert-danger 
  • .alert-primary 
  • .alert-secondary 
  • .alert-light 
  • .alert-dark

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Alerts Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 4 Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box specify a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box specify a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box specify a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> This alert box specify a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> This alert box specify an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> This alert box specify a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

Bootstrap 4 Alerts Example

#2: Bootstrap 4 Alerts Links

In Bootstrap 4 alerts, you may also need to display links inside alerts. For that, you have the .alert-link class, which matches the styling of the link to that of the alert message.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Alerts Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Bootstrap 4 Alert Links</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> <a href="#" class="alert-link">click on me</a>
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

Bootstrap 4 Alerts Tutorial

#3: Bootstrap 4 Closing Alerts

To close the alert message, you need to use the .alert-dismissable class. Then add class="close" and data-dismiss="alert" to a button or link element.  When the user clicks the Close button, the alert disappears.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Alerts Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 4 Closing Alerts</h2>
  <div class="alert alert-success" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> This alert box specify a successful or positive action.
  </div>
  <div class="alert alert-info" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Info!</strong> This alert box specify a neutral informative change or action.
  </div>
  <div class="alert alert-warning" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> This alert box specify a warning that might need attention.
  </div>
  <div class="alert alert-danger" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger!</strong> This alert box specify a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong> This alert box specify an important action.
  </div>
  <div class="alert alert-secondary" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong> This alert box specify a slightly less important action.
  </div>
  <div class="alert alert-dark" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light" "alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

Bootstrap 4 Closing Alerts Example

#4: Bootstrap 4 Animated Alerts

You can give the alert a fading effect when closing them by adding the .fade and .show classes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Alerts Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 4 Animated Alerts</h2>
  <div class="alert alert-success" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> This alert box specify a successful or positive action.
  </div>
  <div class="alert alert-info" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Info!</strong> This alert box specify a neutral informative change or action.
  </div>
  <div class="alert alert-warning" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> This alert box specify a warning that might need attention.
  </div>
  <div class="alert alert-danger" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger!</strong> This alert box specify a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong> This alert box specify an important action.
  </div>
  <div class="alert alert-secondary" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong> This alert box specify a slightly less important action.
  </div>
  <div class="alert alert-dark" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light" "alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
</body>
</html>

The output of the example looks like below image.

Bootstrap 4 Animated Alerts Example

At last, our Bootstrap 4 Alerts Tutorial With Example is over.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.