Bootstrap5 message prompt box

Bootstrap 5 can easily implement an information prompt box.

The prompt box can use the ‘. alert’ class, followed by .alert-success , .alert-info , .alert- warning , .alert-danger , .alert-primary , .alert-secondary , .alert-light or .alert-dark classto implement:

Example

<div class="alert alert-success">
  <strong>success!</strong> You should read carefully <a href="#"
class="alert-link">This message</a>.
</div>

Prompt box to add link

Add to the label of the link in the prompt box alert-link class to set links that match the color of the prompt box:

Example

 <div class="alert alert-success">
   <strong>success!</strong> You should read carefully <a href="#" class="alert-link">
This message</a>.
 </div>

Close the prompt box

We can click in the prompt box div add in .alert-dismissible class, and then add to the link on the close button class="btn-close" , data-dismiss="alert" class to set the closing operation of the promptbox.

Example

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>success!</strong> You should read carefully。</div>

Prompt box animation

.fade and .show class is used to set the fade-out and fade-in effects of the prompt box when it is closed:

Example

<div class="alert alert-danger alert-dismissible fade show">