BS6 gap issues on alert component #42162
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
In BSv6, the gap property was introduced as part of the alert class:
The issue with this is that now every element inside the alert container is now being applied a gap, and this applies to anchors too, leading to issues such as this:
Where a gap is added on both sides of the a element. Furthermore, it will be applied to any other elements such as strong, u, or any other text decoration, which is very commonly used:
The Documentation does not make it clear that in such cases, the contents of the alert should be inside of another container to prevent this, and I'm sure people won't catch this.
I assume this was added to easily add gaps for the icon and close buttons, but the way I see it, those should be either using ms- utility or simply put in a grid with a gap instead.
This change was done in December: 97075b6
This issue is clearly visible at: https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/alert/#link-color
So either the Documentation is going to need an update in the sense that when using the alert component, another parent element should be present for the text content (otherwise any text decoration will suffer from this), or the gap property goes away and we'll be using grid to do the spacing.
Not sure which route you guys want to go.
Reduced test cases
<div class="alert theme-accent" role="alert">
A simple accent <strong>alert</strong> with <a href="#" class="alert-link">an example link</a>. Give it a click if you <u>like</u>.
</div>
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v6-dev