Examples

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts JavaScript plugin.

Basic Example

								  
                    <div class="alert alert-black" role="alert">
                    This is a primary alert—check it out!
                    </div>
                    <div class="alert alert-primary" role="alert">
                    This is a primary alert—check it out!
                    </div>
                    <div class="alert alert-secondary" role="alert">
                    This is a secondary alert—check it out!
                    </div>
                    <div class="alert alert-success" role="alert">
                    This is a success alert—check it out!
                    </div>
                    <div class="alert alert-danger" role="alert">
                    This is a danger alert—check it out!
                    </div>
                    <div class="alert alert-warning" role="alert">
                    This is a warning alert—check it out!
                    </div>
                    <div class="alert alert-info" role="alert">
                    This is a info alert—check it out!
                    </div>
                  
                

Live example

Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

								  
                    <div id="liveAlertPlaceholder"></div>
                    <button type="button" class="btn btn-primary" id="liveAlertBtn">
                      Show live alert
                    </button>
                  
                

We use the following JavaScript to trigger our live alert demo:

								  
                    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('Nice, you triggered this alert message!', 'success')
                      })
                    }                    
                  
                  

Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

• Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
• Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
• On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
• To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

                    
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>