Bootstrap - Alerts

This chapter discusses about the Bootstrap alerts. The alert messages are often the stand out messages shown to the user, where some user action is required, such as warning, error, information or confirmation messages.

By extending the .alert base class with the contextual classes (such as .alert-success, .alert-warning, .alert-info, etc.), you can quickly and simply build attractive alert messages for any number of reasons using Bootstrap. To cancel any alert, you may also include an optional close button.

Simple Alerts

There is a total of 8 different alert types offered by Bootstrap. The most typical alerts, such as success, error or danger, warning and info alerts, etc., are demonstrated in the example below.

Example

You can edit and try running this code using the 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 mt-3">
            <h4 class="fs-2">Examples of alert messages</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert box!
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert box!
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert box!
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert box!
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert box!
            </div>
            <div class="alert alert-info" role="alert">
                It is an info alert box!
            </div>
            <div class="alert alert-light" role="alert">
                It is a light alert box!
            </div>
            <div class="alert alert-dark" role="alert">
                It is a dark alert box!
            </div>
        </div>
    </body>
</html>

Accessibility tip: Use of color to the alert messages just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

Use alternative means to add clarity to the content using the .visually-hidden class.

Live alert example

You can add a live alert message on your webpage. In order to achieve this refer the example given below:

Example

You can edit and try running this code using the 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 mt-3">
                <h4 class="fs-2">Live alert</h4>
                <div class="alert alert-primary alert-dismissible" role="alert">
                    <div id="liveAlertPlaceholder"></div>
                    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
                </div>
            </div>
            <script>
                const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
                const appendAlert = (message, type) => {
                const wrapper = document.createElement('div')
                wrapper.innerHTML = [
                `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                `   <div>${message}</div>`,
                '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
                '</div>'
                ].join('')
                alertPlaceholder.append(wrapper)
                }
                const alertTrigger = document.getElementById('liveAlertBtn')
                if (alertTrigger) {
                    alertTrigger.addEventListener('click', () => {
                    appendAlert('Amazing, this is a live alert message!', 'success')
                    })
                    }
            </script>
      </body>
    </html>

The following Javascript is used to trigger the live alert demo:

  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            const appendAlert = (message, type) => {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
            ``,
            `   ${message}`,
            '   ',
            ''
            ].join('')
              alertPlaceholder.append(wrapper)
            }
            const alertTrigger = document.getElementById('liveAlertBtn')
            if (alertTrigger) {
                alertTrigger.addEventListener('click', () => {
                appendAlert('Amazing, this is a live alert message!', 'success')
                 })
                }

Link Color

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

Example

You can edit and try running this code using the 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 mt-3">
            <h4 class="fs-2">Alert messages with links</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert with <a href="https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
        </div>
  </body>
</html>

Additional content

Additional HTML elements like headers, paragraphs, and dividers can also be included in alerts. Following example demonstrates the same.

Example

You can edit and try running this code using the 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 mt-3">
            <h4 class="fs-2">Alert messages with additional content</h4>
            <div class="alert alert-success" role="alert">
                <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

For creating alerts with icons use flexbox utilities and Bootstrap Icons.

Example

You can edit and try running this code using the 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 mt-3">
            <h4 class="fs-2">Alert messages with icons</h4>
            <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" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-bg"/></svg>
                <div>
                  It is an info alert with an info icon.
                </div>
            </div>
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#success-bg"/></svg>
                <div>
                  It is a success alert with a success icon.
                </div>
            </div>
            <div class="alert alert-warning d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a warning alert with a warning icon.
                </div>
            </div>
            <div class="alert alert-danger d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a danger alert with a danger icon.
                </div>
            </div>
        </div>
  </body>
</html>

Dismissing Alerts

Any alert can be dismissed inline by using the alert JavaScript plugin. Refer the following points:

Make sure the built-in Bootstrap JavaScript or the alert plugin is loaded.
Add a close button and the .alert-dismissible class, which places the close button and provides extra padding to the right of the alert.
The JavaScript feature can be turned on by adding the data-bs-dismiss="alert" attribute to the close button.

Let us see this feature in the following example:

Example

You can edit and try running this code using the 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 mt-3">
            <h4 class="fs-2">Dismissal of alerts</h4>
            <div class="alert alert-primary alert-dismissible" role="alert">
                <strong>Primary Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success alert-dismissible" role="alert">
                <strong>Success Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                <strong>Warning Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
        </div>
  </body>
</html>

Make sure to add tabindex="-1" to the element, when you are setting the focus on a non-interactive element that usually does not receive the focus, after closing an alert message. As, not doing so, might lose the focus and reset it to the start of the page, after an alert message is closed.

Animated Alerts

The utility classes .fade and .show create the animation effect, when you close an alert message. Let us see this feature in the following example.

Example

You can edit and try running this code using the 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 mt-3">
        <h4 class="fs-2">Alert messages with animation</h4>
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <strong>Primary Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Success Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Warning Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
  </body>
</html>

Kickstart Your Career

Get certified by completing the course

Get Started