V4 list-group with an active li, invisible link

[Johann-S]

It seems when an li in .list-group with .active, links aren't visible

See : https://jsfiddle.net/m6zz8sw4/1/

[Quy]

Why not do it as instructed in the doc?

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

[pvdlg]

Here is the link referenced by @Quy : https://v4-alpha.getbootstrap.com/components/list-group/#links-and-buttons

[Johann-S]

Yes it works well with your example @Quy , but according to the documentation we can use both <ul> and <div>. So for me the behavior should be the same. Am I Wrong ?

[Quy]

I would think so too, however, going by the examples in the documentation, use <ul> for non-interactive elements and <div> with a or button for interactive elements.

[mdo]

I think I'll close this as a won't fix for now given we try to keep those list groups as singular large click areas. If you need the inner hyperlink, .text-white is also available.