Bootstrap 5.2 / Componenten

List group

List groups zijn een flexibel en krachtig component om een reeks content weer te geven. Pas ze aan en breid ze uit zodat ze vrijwel elke content erin ondersteunen.

Basisvoorbeeld

De meest basale list group is een ongenummerde lijst met lijstitems en de juiste klassen. Bouw erop voort met de opties hieronder, of naar behoefte met je eigen CSS.

HTML

<ul class="list-group">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
  <li class="list-group-item">Een vierde item</li>
  <li class="list-group-item">En een vijfde</li>
</ul>

Actieve items

Voeg .active toe aan een .list-group-item om de huidige actieve selectie aan te geven.

HTML

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Een actief item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
  <li class="list-group-item">Een vierde item</li>
  <li class="list-group-item">En een vijfde</li>
</ul>

Uitgeschakelde items

Voeg .disabled toe aan een .list-group-item om hem uitgeschakeld te laten lijken. Let op: bij sommige elementen met .disabled is ook eigen JavaScript nodig om hun klikgebeurtenissen volledig uit te schakelen (bijv. bij links).

HTML

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Een uitgeschakeld item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
  <li class="list-group-item">Een vierde item</li>
  <li class="list-group-item">En een vijfde</li>
</ul>

Links en knoppen

Gebruik <a>s of <button>s om actiegerichte list group-items met hover-, disabled- en active-states te maken door .list-group-item-action toe te voegen. We scheiden deze pseudo-klassen zodat list groups van niet-interactieve elementen (zoals <li>s of <div>s) geen klik- of tap-suggestie wekken.

Zorg dat je hier niet de standaard .btn-klassen gebruikt.

HTML

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    Het huidige link-item
  </a>
  <a href="#" class="list-group-item list-group-item-action">Een tweede link-item</a>
  <a href="#" class="list-group-item list-group-item-action">Een derde link-item</a>
  <a href="#" class="list-group-item list-group-item-action">Een vierde link-item</a>
  <a class="list-group-item list-group-item-action disabled">Een uitgeschakeld link-item</a>
</div>

Bij <button>s kun je ook het attribuut disabled gebruiken in plaats van de klasse .disabled. Helaas ondersteunen <a>s het disabled-attribuut niet.

HTML

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    De huidige knop
  </button>
  <button type="button" class="list-group-item list-group-item-action">Een tweede knop-item</button>
  <button type="button" class="list-group-item list-group-item-action">Een derde knop-item</button>
  <button type="button" class="list-group-item list-group-item-action">Een vierde knop-item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Een uitgeschakeld knop-item</button>
</div>

Flush

Voeg .list-group-flush toe om een aantal randen en afgeronde hoeken te verwijderen, zodat list group-items van rand tot rand in een bovenliggende container (bijv. cards) worden weergegeven.

HTML

<ul class="list-group list-group-flush">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
  <li class="list-group-item">Een vierde item</li>
  <li class="list-group-item">En een vijfde</li>
</ul>

Genummerd

Voeg de modifier-klasse .list-group-numbered toe (en gebruik eventueel een <ol>-element) om te kiezen voor genummerde list group-items. De nummers worden via CSS gegenereerd (in plaats van via de standaard browserstyling van een <ol>), voor een betere plaatsing binnen list group-items en betere aanpasbaarheid.

Nummers worden gegenereerd met counter-reset op de <ol>, en vervolgens opgemaakt en geplaatst met een ::before-pseudo-element op de <li> met counter-increment en content.

HTML

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Een lijstitem</li>
  <li class="list-group-item">Een lijstitem</li>
  <li class="list-group-item">Een lijstitem</li>
</ol>

Ze werken ook prima met eigen content.

HTML

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subkop</div>
      Content voor lijstitem
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subkop</div>
      Content voor lijstitem
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subkop</div>
      Content voor lijstitem
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontaal

Voeg .list-group-horizontal toe om de layout van list group-items op alle breakpoints van verticaal naar horizontaal te wijzigen. Of kies een responsieve variant .list-group-horizontal-{sm|md|lg|xl|xxl} om een list group horizontaal te maken vanaf de min-width van dat breakpoint. Momenteel kunnen horizontale list groups niet gecombineerd worden met flush list groups.

Pro-tip: wil je even brede list group-items wanneer ze horizontaal staan? Voeg .flex-fill aan elk list group-item toe.

HTML

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">Een item</li>
  <li class="list-group-item">Een tweede item</li>
  <li class="list-group-item">Een derde item</li>
</ul>

Contextuele klassen

Gebruik contextuele klassen om lijstitems met een statusafhankelijke achtergrond en kleur op te maken.

HTML

<ul class="list-group">
  <li class="list-group-item">Een eenvoudig standaard list group-item</li>


  <li class="list-group-item list-group-item-primary">Een eenvoudig primary-list group-item</li>

  <li class="list-group-item list-group-item-secondary">Een eenvoudig secondary-list group-item</li>

  <li class="list-group-item list-group-item-success">Een eenvoudig success-list group-item</li>

  <li class="list-group-item list-group-item-danger">Een eenvoudig danger-list group-item</li>

  <li class="list-group-item list-group-item-warning">Een eenvoudig warning-list group-item</li>

  <li class="list-group-item list-group-item-info">Een eenvoudig info-list group-item</li>

  <li class="list-group-item list-group-item-light">Een eenvoudig light-list group-item</li>

  <li class="list-group-item list-group-item-dark">Een eenvoudig dark-list group-item</li>


</ul>

Contextuele klassen werken ook met .list-group-item-action. Let op de toevoeging van de hover-stijlen, die in het vorige voorbeeld ontbraken. Ook de .active-state wordt ondersteund; gebruik die om een actieve selectie op een contextueel list group-item aan te geven.

HTML

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Een eenvoudig standaard list group-item</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Een eenvoudig primary-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Een eenvoudig secondary-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Een eenvoudig success-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Een eenvoudig danger-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Een eenvoudig warning-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Een eenvoudig info-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Een eenvoudig light-list group-item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Een eenvoudig dark-list group-item</a>


</div>

Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Met badges

Voeg badges aan elk list group-item toe om ongelezen aantallen, activiteit en meer te tonen, met behulp van een paar utilities.

HTML

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Een lijstitem
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Een tweede lijstitem
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Een derde lijstitem
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Eigen content

Zet er vrijwel alle HTML in, zelfs bij gelinkte list groups zoals hieronder, met behulp van flexbox-utilities.

HTML

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Kop van list group-item</h5>
      <small>3 dagen geleden</small>
    </div>
    <p class="mb-1">Wat opvulcontent in een alinea.</p>
    <small>En wat kleine lettertjes.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Kop van list group-item</h5>
      <small class="text-muted">3 dagen geleden</small>
    </div>
    <p class="mb-1">Wat opvulcontent in een alinea.</p>
    <small class="text-muted">En wat gedempte kleine lettertjes.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Kop van list group-item</h5>
      <small class="text-muted">3 dagen geleden</small>
    </div>
    <p class="mb-1">Wat opvulcontent in een alinea.</p>
    <small class="text-muted">En wat gedempte kleine lettertjes.</small>
  </a>
</div>

Selectievakjes en radioknoppen

Plaats de selectievakjes en radioknoppen van Bootstrap binnen list group-items en pas ze naar behoefte aan. Je kunt ze zonder <label>s gebruiken, maar vergeet dan niet voor de toegankelijkheid een aria-label-attribuut met waarde toe te voegen.

HTML

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">Eerste selectievakje</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Tweede selectievakje</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Derde selectievakje</label>
  </li>
</ul>

HTML

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">Eerste radioknop</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Tweede radioknop</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Derde radioknop</label>
  </li>
</ul>

Je kunt .stretched-link op <label>s gebruiken om het hele list group-item klikbaar te maken.

HTML

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">Eerste selectievakje</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Tweede selectievakje</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Derde selectievakje</label>
  </li>
</ul>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken list groups nu lokale CSS-variabelen op .list-group, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_list-group.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Mixins

Wordt in combinatie met $theme-colors gebruikt om de contextuele variantklassen voor .list-group-items te genereren.

Standaardwaarden: zie scss/mixins/_list-group.scss in de Bootstrap-broncode.

Loop

Loop die de modifier-klassen genereert met de mixin list-group-item-variant().

Standaardwaarden: zie scss/_list-group.scss in de Bootstrap-broncode.

JavaScript-gedrag

Gebruik de tab-JavaScript-plugin — los of via het gecompileerde bootstrap.js-bestand — om onze list group uit te breiden en tabbladpanelen met lokale content te maken.

Home Profiel Berichten Instellingen

Wat opvulcontent in een alinea die betrekking heeft op "Home". En nog wat content, hier alleen gebruikt om dit tabbladpaneel te vullen. In productie zou je hier uiteraard echte content hebben. En niet alleen tekst. Het kan werkelijk van alles zijn: tekst, afbeeldingen, formulieren.

Wat opvulcontent in een alinea die betrekking heeft op "Profiel". En nog wat content, hier alleen gebruikt om dit tabbladpaneel te vullen. In productie zou je hier uiteraard echte content hebben. En niet alleen tekst. Het kan werkelijk van alles zijn: tekst, afbeeldingen, formulieren.

Wat opvulcontent in een alinea die betrekking heeft op "Berichten". En nog wat content, hier alleen gebruikt om dit tabbladpaneel te vullen. In productie zou je hier uiteraard echte content hebben. En niet alleen tekst. Het kan werkelijk van alles zijn: tekst, afbeeldingen, formulieren.

Wat opvulcontent in een alinea die betrekking heeft op "Instellingen". En nog wat content, hier alleen gebruikt om dit tabbladpaneel te vullen. In productie zou je hier uiteraard echte content hebben. En niet alleen tekst. Het kan werkelijk van alles zijn: tekst, afbeeldingen, formulieren.

HTML

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profiel</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Berichten</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Instellingen</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Met data-attributen

Je kunt een list group-navigatie activeren zonder JavaScript te schrijven, simpelweg door data-bs-toggle="list" op een element op te geven. Gebruik deze data-attributen op .list-group-item.

HTML

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profiel</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Berichten</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Instellingen</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

Via JavaScript

Schakel tabbare lijstitems in via JavaScript (elk lijstitem moet afzonderlijk worden geactiveerd):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Je kunt een afzonderlijk lijstitem op verschillende manieren activeren:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Selecteer tabblad op naam

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Selecteer eerste tabblad

Fade-effect

Om tabbladpanelen te laten infaden, voeg je .fade aan elke .tab-pane toe. Het eerste tabbladpaneel moet ook .show hebben om de eerste content zichtbaar te maken.

HTML

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Activeert je content als tabblad-element.

Je kunt een tab-instantie maken met de constructor, bijvoorbeeld:

const bsTab = new bootstrap.Tab('#myTab')

Methode	Omschrijving
`dispose`	Vernietigt de tab van een element.
`getInstance`	Statische methode waarmee je de tab-instantie kunt ophalen die bij een DOM-element hoort; je gebruikt hem zo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een tab-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecteert het opgegeven tabblad en toont het bijbehorende paneel. Elk ander tabblad dat eerder geselecteerd was, wordt gedeselecteerd en het bijbehorende paneel wordt verborgen. Keert terug naar de aanroeper voordat het tabbladpaneel daadwerkelijk getoond is (dus vóór de gebeurtenis `shown.bs.tab`).

Gebeurtenissen

Bij het tonen van een nieuw tabblad worden de gebeurtenissen in deze volgorde afgevuurd:

hide.bs.tab (op het huidige actieve tabblad)
show.bs.tab (op het te tonen tabblad)
hidden.bs.tab (op het vorige actieve tabblad, hetzelfde als bij de gebeurtenis hide.bs.tab)
shown.bs.tab (op het nieuw actieve, zojuist getoonde tabblad, hetzelfde als bij de gebeurtenis show.bs.tab)

Als er nog geen tabblad actief was, worden de gebeurtenissen hide.bs.tab en hidden.bs.tab niet afgevuurd.

Type gebeurtenis	Omschrijving
`hide.bs.tab`	Deze gebeurtenis wordt afgevuurd wanneer er een nieuw tabblad getoond gaat worden (en dus het vorige actieve tabblad verborgen gaat worden). Gebruik `event.target` en `event.relatedTarget` om respectievelijk het huidige actieve tabblad en het binnenkort actieve tabblad aan te spreken.
`hidden.bs.tab`	Deze gebeurtenis wordt afgevuurd nadat een nieuw tabblad is getoond (en dus het vorige actieve tabblad verborgen is). Gebruik `event.target` en `event.relatedTarget` om respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad aan te spreken.
`show.bs.tab`	Deze gebeurtenis wordt afgevuurd bij het tonen van een tabblad, maar voordat het nieuwe tabblad getoond is. Gebruik `event.target` en `event.relatedTarget` om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) aan te spreken.
`shown.bs.tab`	Deze gebeurtenis wordt afgevuurd bij het tonen van een tabblad, nadat het tabblad getoond is. Gebruik `event.target` en `event.relatedTarget` om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) aan te spreken.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // nieuw geactiveerd tabblad
    event.relatedTarget // vorige actieve tabblad
  })
})