bootstrap
  1. bootstrap-alerts
PreviousNext

Bootstrap Alerts

Bootstrap alerts are used to display important information to users. They are customizable and can be styled to fit the design of your website.

Syntax

To create an alert in Bootstrap, you need to use the following HTML syntax:

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

In the example above, we used the alert class and the alert-primary class to create a primary alert.

You can also add more classes to modify the alert's appearance. For example, you can use the alert-dismissible class to add a close button to the alert:

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

Example

Here are some examples of Bootstrap alerts.

<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 an info 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-light" role="alert">
  This is a light alert—check it out!
</div>

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

Alert with Icons

Depending on your icons and content, you may want to add more utilities or custom styles.

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
    <symbol id="check-circle-fill" 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-fill" 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="exclamation-triangle-fill" 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-fill" />
    </svg>
    <div>
        An example alert with an 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="#check-circle-fill" />
    </svg>
    <div>
        An example success alert with an 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="#exclamation-triangle-fill" />
    </svg>
    <div>
        An example warning alert with an 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="#exclamation-triangle-fill" />
    </svg>
    <div>
        An example danger alert with an icon
    </div>
</div>
Try Playground

Close Alert

<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>
Try Playground

Explanation

In the example above, we used different classes to create different types of alerts:

  • alert-success: a success alert that is green.
  • alert-danger: a danger alert that is red.
  • alert-warning: a warning alert that is yellow.
  • alert-info: an info alert that is blue.
  • alert-primary: a primary alert that is blue.
  • alert-secondary: a secondary alert that is gray.
  • alert-light: a light alert that is white.
  • alert-dark: a dark alert that is black.

You can also modify the appearance of the alerts by adding classes such as alert-dismissible, fade, and show.

Use

Bootstrap alerts are useful for displaying important information to users, such as success messages, error messages, warning messages, or info messages.

Important Points

  • Bootstrap alerts are customizable and can be styled to fit the design of your website.
  • You can use various classes such as alert-success or alert-warning to create different types of alerts.
  • You can add more classes to modify the appearance of the alerts.

Summary

Bootstrap alerts are a simple yet effective way to display important information to users. By using various classes, you can create different types of alerts that fit your website's design.

AccordionCarousel
Published on: