Le stretched link

Depuis la mise à jour 4.3.1, il est possible d’englober un élément en position relative avec un lien pour que le contenant entier soit cliquable. Découvrons ensemble comment y remédier.

Posté le par Benoît Philibert|807 vues

Fonctionnement

La classe .stretched-link s’applique à une balise a pour rendre son bloc contenant cliquable via un pseudo-élément ::after. La documentation Bootstrap rappelle que la classe s’utilise avec tout type de contenant et que des élément natifs comme card ou media sont des composants parfaits pour utiliser toutes les possibilités qu’offre .stretched-link.

Attention, dans la majeur partie des cas (pour ne pas dire tous), le contenant doit avoir une postition:relative; pour que cela fonctionne.

La pratique

Utilisation avec le composant card :

Cliquez sur l’onglet « Result » pour afficher le résultat du code ci-dessus dans JSfiddle.

Exemple d’utilisation avec le composant media :

Crédit

Rocket Design

Retrouvez les illustrations utilisées en présentation et réalisées par Valentin Gorris sur sa page Dribbble officielle.

Découvrez la page dédiée au stretched-link sur le site officiel getbootstrap.com


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.