Teach with us

Bootstrap - Alerts

Previous Page
Next Page  

This chapter will discuss about Bootstrap alerts and the classes to provide alert messages. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.

Alert boxes are frequently used to draw user’s attention to information that needs their immediate focus, such as warning, error, or confirmation messages.

Creating Alerts

Bootstrap 5.3 offeres a total 8 different types of alerts which have been listed below:

Example

To create an alert we simply use .alert class followed by one of the contextual classes such as .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark: as shown below in the example:

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Bootstrap - Alerts</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="container-fluid mt-4">
      <div class="alert alert-success">
       <strong>Success!</strong> This alert box indicates a success message.
     </div>
     <div class="alert alert-info">
       <strong>Info!</strong> This alert box indicates a informational message.
     </div>
     <div class="alert alert-warning">
       <strong>Warning!</strong> This alert box indicates a warning message.
     </div>
     <div class="alert alert-danger">
       <strong>Danger!</strong> This alert box indicates some dangerous action.
     </div>
     <div class="alert alert-primary">
       <strong>Primary!</strong> This alert box indicates an important action.
     </div>
     <div class="alert alert-secondary">
       <strong>Secondary!</strong> Indicates a slightly less important action.
     </div>
     <div class="alert alert-dark">
       <strong>Dark!</strong> This will display a dark grey alert.
     </div>
     <div class="alert alert-light">
       <strong>Light!</strong> This will display a light grey alert.
     </div>
   </div>
</body>
</html>

Alerts with Links

The Bootstrap utility class .alert-link can be used for any alert box links to instantly produce a matching coloured links, as demonstrated in the example below.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Bootstrap - Alerts</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="container-fluid mt-4">
    <div class="alert alert-success">
      <strong>Success!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-info">
      <strong>Info!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-warning">
      <strong>Warning!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-danger">
      <strong>Danger!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-primary">
      <strong>Primary!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-secondary">
      <strong>Secondary!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-dark">
      <strong>Dark!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
    <div class="alert alert-light">
      <strong>Light!</strong> Click here for<a href="#" class="alert-link">more info</a>.
    </div>
   </div>
</body>
</html>

Alerts with Additional Information

Additional HTML elements like headers, paragraphs, and dividers can also be included in alerts as shown below:

Example

Following example demonstartes the same. You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Bootstrap - Alerts</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="container-fluid mt-4">
      <div class="alert alert-success">
         <h4 class="alert-heading">Congratulations! Sending my best wishes!</h4>
         <p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p>
         <hr>
         <p class="mb-0">What could be better than something sweet to celebrate an accomplishment.</p>
      </div>
   </div>
</body>
</html>

Alerts with Icons

You can also create alerts with icons by using flexbox utilities and Bootstrap Icons together. You might wish to add more utilities or specific styles based on the icons and content.

Example

Let's look at the following example. You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Bootstrap - Alerts</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-4">
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="success-bg" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
      </symbol>
      <symbol id="info-bg" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
      </symbol>
      <symbol id="warning-bg" viewBox="0 0 16 16">
        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
      </symbol>
   </svg>

   <div class="alert alert-primary d-flex align-items-center">
      <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#info-bg"/></svg>
      <div>
         The following is a info alert with an icon
      </div>
   </div>
   <div class="alert alert-success d-flex align-items-center">
      <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#success-bg"/></svg>
      <div>
         The following is a success alert with an icon
      </div>
   </div>
   <div class="alert alert-warning d-flex align-items-center">
      <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#warning-bg"/></svg>
      <div>
         The following is a warning alert with an icon
      </div>
   </div>
</div>
</body>
</html>

Closing Alerts

We can also provide a close button alongwith any alert which will help in closing the alert. To close the alert message, add a .alert-dismissible class to the alert container. Then add class="btn-close" and data-bs-dismiss="alert" to a link or a button element.

You can also add .fade and .show classes if you want alerts to animate when you close them.

Example

Let us see this feature in action. You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Bootstrap - Alerts</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="container-fluid mt-4">
      <div class="alert alert-success alert-dismissible fade show">
       <strong>Success!</strong> This alert box indicates a success message.
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
     </div>
     <div class="alert alert-info alert-dismissible fade show">
       <strong>Info!</strong> This alert box indicates a informational message.
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
     </div>
     <div class="alert alert-warning alert-dismissible fade show">
       <strong>Warning!</strong> This alert box indicates a warning message.
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
     </div>
   </div>
</body>
</html>
Previous Page Print Page Next Page  
Advertisements