---
title: "Alert Boxes"
canonical: "https://kb.uconn.edu/space/IKB/10769929485/Alert%20Boxes"
format: markdown
---
This article covers how to setup accordions within the [Classic Editor](https://kb.uconn.edu/space/IKB/10781392971/Accordions#classic-editor).  The Block Editor does not have Alert Boxes pre-configured at this time.

You can make any div an alert box by adding `alert alert-*` classes to it. To add alert boxes to your page/post, you must be in the ‘Text’ editor view.

[Examples](https://aurora.uconn.edu/alert-box-examples/)

| Class | Sample Code |
| --- | --- |
| alert-success | ```
<div class="alert alert-success" role="alert">Success!</div>
``` |
| alert-info | ```
<div class="alert alert-info" role="alert">Information.</div>
``` |
| alert-warning | ```
<div class="alert alert-warning" role="alert">Warning.</div>
``` |
| alert-danger | ```
<div class="alert alert-danger" role="alert">Danger!</div>
``` |

## Dismissible Alerts

Build on any alert by adding an optional `.alert-dismissible` and close button.

```
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
```