title: Bootstrap 5: Why is the "X" not showing for an "Alert Dismissable"
body: <p>I have Bootstrap 5 loaded via Node Modules.</p>
  <p>I am calling the Alert Dismissible from inside a JS function. It works</p>
  <p>HOWEVER, My Alert delivers a very bad button, in the wrong place, BUT, it does close. SEE SCREEN SHOT.  However, why it does it not deliver the nice BS &quot;X&quot; in the correct place on the right hand side? Possibly something with the JS? But I can't see it. Many thanks!</p>
  <p>My JS Code:</p>
  <pre><code>  if(id == &quot;108&quot; ){
                  $(&quot;#epo&quot;).html(&quot;&lt;button type=button  data-bs-dismiss=alert aria-label=Close&gt;&quot;).addClass(&quot;alert alert-warning alert-dismissible fade show  btn-close&quot;).append('this is an EPO');
                  $(&quot;tr.child td.checkboxOut input&quot;).filter(function (index) {
                      return $(this).attr(&quot;id&quot;) == id;
                  }).val(time).css({
                      &quot;color&quot;: &quot;rgb(42, 144, 85)&quot;,
                      &quot;text-align&quot;: &quot;center&quot;,
                      &quot;border&quot;: &quot;2px solid rgb(42, 144, 85&quot;
                  });
              }else {
                  BLAH BLAH BLAH
              }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/11CGC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/11CGC.png" alt="My BS Alert Dismissible" /></a></p>