Alert with icons example is broken about bootstrap HOT 3 CLOSED

Yes, in https://getbootstrap.com/docs/5.3/components/alerts/#icons, we're using .me-2 for the SVG so that it adds a right margin.

from bootstrap.

Thanks for reporting this issue @huseeiin
This alert variant uses Bootstrap icons that require setting its size correctly in this example.

Depending on your icons and content, you may want to add more utilities or custom styles.

We are using here the .bi class that is defined in the CSS of the documentation as the following:

.bi {
  width: 1.5rem;
  height: 1.5rem
}

If you add this CSS to your CodePen example, it'll work as in our documentation.
I'm closing this issue as this comment resolves it.

from bootstrap.

Thanks for reporting this issue @huseeiin This alert variant uses Bootstrap icons that require setting its size correctly in this example.

Depending on your icons and content, you may want to add more utilities or custom styles.

We are using here the .bi class that is defined in the CSS of the documentation as the following:

.bi {
  width: 1.5rem;
  height: 1.5rem
}

If you add this CSS to your CodePen example, it'll work as in our documentation. I'm closing this issue as this comment resolves it.

i'm using

<div role="alert" class="alert alert-danger alert-dismissible fade show">
  <i class="bi bi-exclamation-triangle-fill"></i>
  Hello
  <button
    type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close"
  ></button>
</div>

which solves it but there is no space between the icon and the text. is there a solution?

from bootstrap.