Bootstrap 5 Lijstgroep

Basis lijst met items

De meest basis lijst met items is een ongesorteerde lijst zonder lijstitems:

Gebruik om een basis lijst met items te maken: .list-group van <ul> Element en klasse zijn .list-group-item van <li> Element:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item">Eerste item</li>
  <li class="list-group-item">Tweede item</li>
  <li class="list-group-item">Derde item</li>
</ul>

Probeer het zelf

Actieve status

Gebruik .active Klasse om het huidige item te markeren:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item active">Actieve item</li>
  <li class="list-group-item">Tweede item</li>
  <li class="list-group-item">Derde item</li>
</ul>

Probeer het zelf

Lijst met link-items

Gebruik om een lijst met link-items te maken: <div> in plaats van <ul>gebruik <a> in plaats van <li>Optioneel, voeg toe om een grijs achtergrondkleur bij de hover: .list-group-item-action Categorie:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Eerste optie</a>
  <a href="#" class="list-group-item list-group-item-action">Tweede optie</a>
  <a href="#" class="list-group-item list-group-item-action">Derde item</a>
</div>

Probeer het zelf

Uitgeschakelde items

.disabled De klasse voegt een lichte tekstkleur toe aan uitgeschakelde items. Bij gebruik in links wordt de hover-effect verwijderd:

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item disabled">Uitgeschakelde item</a>
  <a href="#" class="list-group-item disabled">Uitgeschakelde item</a>
  <a href="#" class="list-group-item">Derde item</a>
</div>

Probeer het zelf

Verwijder randen

Gebruik .list-group-flush klasse verwijdert randen en ronde hoeken:

Voorbeeld

<ul class="list-group list-group-flush">
  <li class="list-group-item">Eerste item</li>
  <li class="list-group-item">Tweede item</li>
  <li class="list-group-item">Derde item</li>
  <li class="list-group-item">Vierde item</li>
</ul>

Probeer het zelf

genummerde lijstgroep

Gebruik .list-group-numbered klasse maakt lijstitems met nummers aan:

Voorbeeld

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Eerste item</li>
  <li class="list-group-item">Tweede item</li>
  <li class="list-group-item">Derde item</li>
</ol>

Probeer het zelf

Horizontale lijstgroep

Als je wilt dat lijstitems horizontaal worden weergegeven in plaats van verticaal (naast elkaar in plaats van gestapeld), voeg dan .list-group-horizontal klasse toe te voegen aan .list-group：

Voorbeeld

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Eerste item</li>
  <li class="list-group-item">Tweede item</li>
  <li class="list-group-item">Derde item</li>
  <li class="list-group-item">Vierde item</li>
</ul>

Probeer het zelf

Context classes

Context classes kunnen gebruikt worden om de kleur van lijstitems toe te voegen:

De klassen die de kleur van lijstitems bepalen zijn:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Voorbeeld

<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">Secundaire item</li>
  <li class="list-group-item list-group-item-info">Informatie item</li>
  <li class="list-group-item list-group-item-warning">Waarschuwing item</li>
  <li class="list-group-item list-group-item-danger">Gevaar item</li>
  <li class="list-group-item list-group-item-primary">Primair item</li>
  <li class="list-group-item list-group-item-dark">Donker item</li>
  <li class="list-group-item list-group-item-light">Licht item</li>
</ul>

Probeer het zelf

Item met contextklasse

Voorbeeld

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Actie item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Succes item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secundaire item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Informatie item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Waarschuwing item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Gevaarlijk item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primair item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Donker item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Licht item</a>
</div>

Probeer het zelf

Beadelde lijstgroepen

Verplaats .badge Kombineren met de class en utility/helper classes om badges toe te voegen aan lijstgroepen:

Voorbeeld

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inkomende post
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Promotiemail
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Prullenbak
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Probeer het zelf