Comment rendre tout un composant cliquable grâce au stretched linking de Bootstrap

Le stretched linking a vu le jour dans la version 4.3.1 de la bibliothèque, il a été intégré par l’équipe de Bootstrap pour faciliter la navigation aux utilisateurs d’une application web.

Qu’est-ce que c’est le concept du stretched linking de Bootstrap?

 Il s’agit d’inclure dans un composant un lien, ensuite étendre le cliquet du lien à son conteneur, et rendre ainsi tout le conteneur cliquable.

Ben okay, en quoi cela m’est-il utile ?

Forcément, bon nombres d’entre vous vont se poser cette question, mais vous en saurez plus sur l’utilité du stretched linking de Bootstrap juste après les exemples suivants.

Des exemples pour illustrer l’utilité du stretched linking de Bootstrap 

LA SUITE APRÈS CETTE PUBLICITÉ

• Prenons les billets de blog, le visiteur n’est pas obligé de cliquer sur ‘’Lire la suite’’ ou encore ‘’En savoir plus’’ qui se trouve en bas des billets de blogs pour ouvrir la page proposant l’article en entier.

Si le billet intègre le stretched link, le visiteur peut cliquer sur le titre, le mini texte du billet ou encore tout autre endroit du billet pour accéder à l’article.

• C’est pareil pour les produits présentés sous forme de gallérie sur un site e-commerce, grâce au stretched link, l’image du produit, le titre du produit ou toute autre partie du produit une fois cliqué emmènera le visiteur sur la page de description du produit.

Maintenant que vous savez ce que c’est que le stretched linking de Bootstrap et à quoi il sert, nous allons maintenant voir comment l’implémenter.

Comment implémenter le stretched link dans un composant ?

Il n’y a rien de compliqué à intégrer un stretched link dans un composant, je dirais même que c’est la plus facile des outils de Bootstrap à utiliser.

Il suffit d’intégrer un lien dans le composant et d’ajouter la classe .stretched-link à ce lien.

Ps : Il est primordial que ce composant ait une position relative (position: relative), sinon tout le composant ne sera pas cliquable.

C’est tout, rien de bien compliqué n’est-ce pas !

Les composants natifs Bootstrap tels que card et media sont des composants parfaits qui peuvent bien implémenter le stretched linking.

Exemple d’implémentation du stretched link dans un card 

Nous allons créer un card, et lui intégrer un stretched link.  Le card emmènera sur la page Facebook de ce blog  lors d’un clic.

PS : Le card par défaut a la position relative (position: relative) dans la librairie Bootstrap, donc nous n’avons plus besoin de le lui ajouter.

<div class="card">
    	<div class="card-body">
    		<h4 class="card-title">Titre</h4>
    		<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    	    </p>
    	    <a href="bootstrap-top-design.com" class="btn btn-warning stretched-link" target="_blank">Lien stretched-link</a>
    	</div>
    </div>

Quand vous accédez à la démo par le biais du bouton démo ci-dessous, vous pouvez le tester en cliquant sur n’importe quelle partie du card.