I'm experiencing an issue trying to display a bootstrap alert in my HTML code. Here is the code I'm using:
<div class="alert alert-success alert-dismissible fade show" role="alert">
text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
(I copied it from https://getbootstrap.com/docs/5.0/components/alerts/)
Here are the CSS and JS imports in my <head>
:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918f918f92dddacbde8d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2ecf2ecf1beb9a8bdee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"gt;
When I insert it into my code, this is how it appears:
https://i.sstatic.net/jLyXY.png
I'm not sure how to resolve this issue, can someone assist me?