Alert Boxes

This article covers how to setup accordions within the 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

Class	Sample Code

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>