Bootstrap 4警报框关闭按钮未对齐

Question

I'm using bootstrap and I currently have an alert box:

<div class="alert alert-secondary alert-dismissible" id="delAlbumAlert">
  <span><strong>Delete Album!</strong> Select the album(s) you want to delete.</span>
  <button type="button" class="close" aria-label="Close" onclick="return handleOptions($('#btnDeleteAlbum'));">
    <span aria-hidden="true" style="color:black;">&times;</span>
  </button>
</div>

The close button is not aligned vertically. Here is how it shows up.

How can I make the button aligned? I tried using the <div clas="alert..." style="top: -4px;"> and it kind of worked but I was wondering if there is a better approach.

Answer 1

Override the padding-top property of the button like the following:

 .close { padding-top: .60rem !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="alert alert-secondary alert-dismissible" id="delAlbumAlert"> <span><strong>Delete Album!</strong> Select the album(s) you want to delete.</span> <button type="button" class="close" aria-label="Close" onclick="return handleOptions($('#btnDeleteAlbum'));"> <span aria-hidden="true" style="color:black;">&times;</span> </button> </div> 

Answer 2

You can remove the class alert-dismissable because it's not necessary to make the alert dismissable, this class only has styling purposes. You can use flexbox to align the close-button vertically:

<div class="alert alert-success fade show d-flex justify-content-center align-items-center">
    <i class="fa-duotone fa-circle-exclamation fa-lg me-auto"></i>
    <span class="me-auto px-3">This is a success alert ...</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Important is to use data-bs-dismiss="alert" attribute.