How to fix misaligned closing x symbol in this alert box?-CodePudding

After adjusting the line height, the closing x mark to the right aligns closer to the bottom of the alert message box. I'm using Bootstrap v5.0.1. How do I vertically center the x mark? Thanks.

CSS:

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

HTML:

<div  role="alert">
  Success! Your application was submitted!
  <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Result:

CodePudding user response：

Use mt-2 for margin-top: .5em; on your button.

.alert {
  line-height: 45px;
  font-size: 15px;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<div  role="alert">
  Success! Your application was submitted!
  <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Side note - setting a height, line-height, and padding in Bootstrap is a little redundant. You should use Bootstrap Text Utilities to replace your CSS. For example, lh = line-height and fs = font-size.

CodePudding user response：

You can just change de .btn-close height. I tried some height, and i found that acceptable.

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

.btn-close {
  height: 5px;
}

CodePudding user response：

If you don't want to overwrite an exitsing bootstrap class, you can add your own, and overwrite the padding like this:

    <style>
        .alert {
          margin-bottom: 1px;
          height: 45px;
          line-height:45px;
          padding:0px 15px;
          font-size: 15px;
        }
        .alert >.extra {
            padding: 0.8rem 1rem;
        }
      </style>

    <div  role="alert">
            The activator phrase was successfully registered!
            <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
     </div>