Exercise: Edit Pages in Explore Power Pages design studio

Question

The exercise instructions call for manually adding this block to a page via VS Code:

<div role="alert" class="alert alert-info alert-dismissible"> <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong> Get your unlimited free education at <a href="https://learn.microsoft.com/">Microsoft Learn</a> </div>

According to the instructions, this should add a "dismissible" alert to the page:

1. Press cross (x) icon to dismiss the alert.

After syncing and opening the page via the preview link, the alert appears but is not dismissible. Clicking the (x) icon does nothing.