Afficher et cacher du contenu dans Bootstrap 3 en fonction de la taille de l’écran

Bootstrap 3 met à votre disposition une collection de classes permettant d’afficher ou de cacher du contenu en fonction de la taille de l’écran. tout cela pour vous simplifier la vie et vous faciliter  le développement d’une page multisupport.

Nous allons ici présenter les classes .hidden-* et .visible-* que nous utiliserons pour arriver à ce résultat :

Classe Extra small devices (smartphone) Small devices (tablette) Medium devices

(écran de bureau)

Large devices

(grand écran)

.visible-xs visible caché caché caché
.visible-sm caché visible caché caché
.visible-md caché caché visible caché
.visible-lg caché caché caché visible
.hidden-xs caché visible visible visible
.hidden-sm visible caché visible visible
.hidden-md visible visible caché visible
.hidden-lg visible visible visible caché

Le tableau ci-dessous vous donne une vue globale et complète Bootstrap 3 permettant de cacher, sur les plus petits supports, certains blocs dont le contenu est secondaire.

Exemple :

Résultat de la page sur un ordinateur de bureau:

Le résultat de la page sur un ordinateur de bureau

Le résultat de la page sur un ordinateur de bureau

cacher-contenu-Bootstrap 3

Le résultat de la page sur un smartphone

Comme attendu, l’usage de la classe .hidden-xs permet de cacher le deuxième bloc sur l’écran de notre smartphone

One comment

Laisser un commentaire