Cacher des éléments et gérer les dépassements avec Bootstrap

Bootstrap met à notre disposition des classes qui vont nous permettre de définir si un élément doit être visible ou non ainsi que le comportement à adopter dans les cas où le contenu de l’élément dépasse de son conteneur.

 

Gérer la visibilité des éléments

On va pouvoir contrôler l’état de visibilité de nos éléments grâce aux classes .visible (l’élément sera visible) et .invisible (l’élément sera invisible).

En appliquant une classe .invisible à un élément, l’élément sera caché mais l’espace qui lui est réservé sera conservé dans la page.

En d’autres termes, et à la différence d’un display : none, la classe .invisible n’affecte pas la disposition des éléments dans la page.

See the Pen
Bootstrap 2.9.1
by Pierre (@pierregiraud)
on CodePen.

 

Gérer les dépassements

Pour gérer les dépassements (« l’overflow ») de contenus, Bootstrap nous offre deux classes .overflow-auto et .overflow-hidden.

Appliquer une classe .overflow-auto à un élément va indiquer au navigateur qu’il pourra choisir la façon la plus adaptée selon lui de gérer le dépassement tandis qu’une classe .overflow-hidden permettra de cacher le contenu qui dépasse en le coupant.

A noter que ces deux classes ne sont pas responsive.

See the Pen
Bootstrap 2.9.2
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire