.list-group-item-action .list-group-item-link

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I am requesting, please, this syntax:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-link">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-link">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-link">A fourth link item</a>
</div>

And it would render identically to how this looks:

<ul class="list-group">
  <li class="list-group-item"><a href="#">A first link item</a></li>
  <li class="list-group-item"><a href="#">A second link item</a></li>
  <li class="list-group-item"><a href="#">A third link item</a></li>
</ul>

The only difference is it would have the large .list-group-item-action hit targets that we love. i.e. there are no dead pixels around the link in the items.

Motivation and context

In many contexts of using list groups, it can be necessary to show a blue underline, otherwise people won't know it is clickable.

But using the ul.list-group > li.list-group-item > a syntax makes small hit targets, which are suboptimal.

Start by reviewing Bootstrap's list-group and list-group-item-action behavior, using the HTML examples in the proposal as the acceptance target. Compare the proposed link-based markup with the existing list-group patterns and verify that the resulting item has the same appearance and full hit target without dead space.