El grupo de lista más básico es una lista desordenada con elementos de lista. Para crear un grupo de lista básico, usa un elemento <ul> con la clase .list-group y elementos <li> con la clase .list-group-item.
Ejm
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Estado activo
Use la clase .active para resaltar el elemento actual.
Ejm
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Lista de grupo con elementos vinculados
Para crear un grupo de lista con elementos vinculados, usa <div> en lugar de <ul> y <a> en lugar de <li>. Opcionalmente, agrega la clase .list-group-item-action si deseas un color de fondo gris al pasar el mouse:
Ejm
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Artículo deshabilitado
La clase .disabled agrega un color de texto más claro al elemento deshabilitado. Y cuando se usa en enlaces, eliminará el efecto de desplazamiento.
Ejm
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Enjuagar / eliminar bordes
Use la clase .list-group-flush para eliminar algunos bordes y esquinas redondeadas.
Ejm
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Lista de grupos horizontal
Si deseas que los elementos de la lista se muestren horizontalmente en lugar de verticalmente (uno al lado del otro en lugar de uno encima del otro), agrega la clase .list-group-horizontal a .list-group.
Ejm
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Clases contextuales
Las clases contextuales son usadas para poner color a los artículos (ítems).
Las clases para colorear elementos de la lista son.
- .list-group-item.success
- .list-group-item-secundary
- .list-group-item-info
- .list-group-item-warning
- .list-group-item-danger
- .list-group.item-primary
- .list-group-item-dark
- .list-group-item-light
Ejm
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
Vincular elementos con clases contextuales
Ejm
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Lista de grupo con insignias
Combina clases .badge con clases de utilidad / ayuda para agregar distintivos dentro del grupo de lista:
Ejm
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>