list-group-flush not working on Bootstrap 4.5.0

[xalvarez]

• Operating system and version: Ubuntu 18.04
• Browser and version: Mozilla Firefox 76.0

I've just upgraded from Bootstrap 4.4.1 to 4.5.0 and realized that list-group-flush no longer seems to always work properly.

To I've created an example list to showcase this problem and this is the result:

Bootstrap 4.4.1: https://codepen.io/xalvarez/pen/vYNzNmE
Bootstrap 4.5.0: https://codepen.io/xalvarez/pen/dyYqYNx

As you can see, on bootstrap 4.5.0 a border is shown, which I wouldn't expect to see when using list-group-flush.

I'm using a label to wrap each li so that the whole row element is clickable and I don't need to exactly click on the radio button. Removing this label solves the problem with the border, but I don't really know why, as the css classes associated with label don't seem to have any effect on the border.

This is the workaround I've implemented:

.list-group-item {
    border: 0;
}

[XhmikosR]

I wonder if it's the same root cause as #30793.

@twbs/css-review

[ffoodd]

Same root cause indeed.

However it's worth mentionning that this use case is very wrong: using anything else than <li> as <ul> direct child is invalid HTML.

FWIW, fixing this makes the result a lot closer from each other:

• 4.4.1: https://codepen.io/ffoodd/pen/bGVxpBX
• 4.5.0: https://codepen.io/ffoodd/pen/ZEbMWOp

So I think this should not be considered as a valid use case for this regression.

I'd recommend working with our .stretched-link utility for this use case: https://codepen.io/ffoodd/pen/eYpLZWg (we may mention this use case beside the card link example).

You'll notice I also set .position-static on .form-check: this'll work as long as you don't need custom radios. If you need it, you'll probably have to use padding utilities to apply paddings on .form-check and remove .list-group-item's ones.

[XhmikosR]

Your call how to handle the issue @ffoodd 🙂

[ffoodd]

@xalvarez FWIW a regression is already identified, so there will be a fix of some kind but I can't assure you it'll fix your use case.

Does my suggestion works for you?

[xalvarez]

@ffoodd sounds great, thanks for your help & feedback!

[tveimo]

Looks like there's still an issue where the list-group is the last element in a card, then it is missing the bottom border.

[mdo]

Looks like there's still an issue where the list-group is the last element in a card, then it is missing the bottom border.

Can you share a reduced test case?

[tveimo]

Hmm, looks like it was some supporting css that interfered.