title: Bootstrap 4 alert box close button not aligned
body: <p>I'm using bootstrap and I currently have an alert box:</p>
  
  <pre><code>&lt;div class="alert alert-secondary alert-dismissible" id="delAlbumAlert"&gt;
    &lt;span&gt;&lt;strong&gt;Delete Album!&lt;/strong&gt; Select the album(s) you want to delete.&lt;/span&gt;
    &lt;button type="button" class="close" aria-label="Close" onclick="return handleOptions($('#btnDeleteAlbum'));"&gt;
      &lt;span aria-hidden="true" style="color:black;"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The close button is not aligned vertically. Here is how it shows up.</p>
  
  <p><img src="https://i.stack.imgur.com/j8srz.png" alt="img"></p>
  
  <p>How can I make the button aligned? I tried using the <code>&lt;div clas="alert..." style="top: -4px;"&gt;</code> and it kind of worked but I was wondering if there is a better approach. </p>