# Bootstrap Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts.

## Examples

Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
Copy

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

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

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

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

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

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

## With icon

thumb_up_off_alt Warning! This is a warning alert—check it out that has an icon too!
Copy

      <div class="alert alert-warning" role="alert">
          <span class="alert-icon align-middle">
            <span class="material-icons text-md">
            thumb_up_off_alt
            </span>
          </span>
          <span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
      </div>

## Dismissing

thumb_up_off_alt Primary! This is a primary alert—check it out!
thumb_up_off_alt Secondary! This is a secondary alert—check it out!
thumb_up_off_alt Info! This is a info alert—check it out!
thumb_up_off_alt Success! This is a success alert—check it out!
thumb_up_off_alt Danger! This is a danger alert—check it out!
thumb_up_off_alt Warning! This is a warning alert—check it out!
Copy

        <div class="alert alert-primary alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="alert alert-secondary alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Info!</strong> This is a info alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <span class="alert-icon align-middle">
              <span class="material-icons text-md">
              thumb_up_off_alt
              </span>
            </span>
            <span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>