Bootstrap 5.2 / Helpers

Stretched link

Maak elk HTML-element of Bootstrap-component klikbaar door een geneste link via CSS op te "rekken".

Voeg .stretched-link toe aan een link om zijn containing block klikbaar te maken via een ::after-pseudo-element. In de meeste gevallen betekent dit dat een element met position: relative; dat een link met de klasse .stretched-link bevat, klikbaar is. Houd er rekening mee dat, gezien hoe CSS position werkt, .stretched-link niet gecombineerd kan worden met de meeste tabel-elementen.

Cards hebben in Bootstrap standaard position: relative, dus in dat geval kun je de klasse .stretched-link zonder verdere HTML-aanpassingen veilig aan een link in de card toevoegen.

Meerdere links en tap-doelen worden afgeraden in combinatie met stretched links. Mocht dit toch nodig zijn, dan kunnen bepaalde position- en z-index-stijlen helpen.

HTML

<div class="card" style="width: 18rem;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="false">
  <div class="card-body">
    <h5 class="card-title">Card met stretched link</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
    <a href="#" class="btn btn-primary stretched-link">Ga ergens heen</a>
  </div>
</div>

De meeste eigen componenten hebben niet standaard position: relative, dus moeten we hier .position-relative toevoegen om te voorkomen dat de link zich buiten het bovenliggende element uitrekt.

HTML

<div class="d-flex position-relative">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20144%20144%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2218%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="144" height="144" class="flex-shrink-0 me-3" alt="false">
  <div>
    <h5 class="mt-0">Eigen component met stretched link</h5>
    <p>Dit is wat opvultekst voor het eigen component. Het is bedoeld om na te bootsen hoe echte content eruit zou zien, en we gebruiken het hier om het component wat body en omvang te geven.</p>
    <a href="#" class="stretched-link">Ga ergens heen</a>
  </div>
</div>

HTML

<div class="row g-0 bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="200" class="w-100" alt="false">
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">Kolommen met stretched link</h5>
    <p>Nog een stuk opvultekst voor dit andere eigen component. Het is bedoeld om na te bootsen hoe echte content eruit zou zien, en we gebruiken het hier om het component wat body en omvang te geven.</p>
    <a href="#" class="stretched-link">Ga ergens heen</a>
  </div>
</div>

Het containing block herkennen

Als de stretched link niet lijkt te werken, is het containing block waarschijnlijk de oorzaak. De volgende CSS-eigenschappen maken van een element een containing block:

Een andere position-waarde dan static
Een andere transform- of perspective-waarde dan none
Een will-change-waarde van transform of perspective
Een andere filter-waarde dan none, of een will-change-waarde van filter (werkt alleen in Firefox)

HTML

<div class="card" style="width: 18rem;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="false">
  <div class="card-body">
    <h5 class="card-title">Card met stretched links</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">De stretched link werkt hier niet, omdat <code>position: relative</code> aan de link is toegevoegd</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      Deze <a href="#" class="text-warning stretched-link">stretched link</a> wordt alleen over de <code>p</code>-tag uitgerekt, omdat daarop een transform is toegepast.
    </p>
  </div>
</div>