Bootstrap 5 Alert

In Bootstrap 5, alerts are used to display feedback messages in a visually appealing and dismissible format. Here's how to implement and customize alerts:

Example
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is an info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>

Try it yourself

Dismissible Alert:

Add the .alert-dismissible and .fade show classes along with a close button.

  • .fade show: Adds a smooth fading effect.
  • data-bs-dismiss="alert": Enables the dismiss functionality.
Example
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a dismissible alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Try it yourself

Alerts with Links:

Include hyperlinks inside alerts by wrapping text with <a> tags and using .alert-link.

Example
<div class="alert alert-info" role="alert">
Visit our <a href="#" class="alert-link">documentation</a> to learn more.
</div>

Try it yourself


Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.