Bootstrap : comment aligner un container à la verticale et l'horizontale ?
Le framework Bootstrap dans sa version 4 utilise le modèle des flexbox afin de faciliter la disposition des éléments dans la page. Grâce à quelques classes CSS fournis par le framework, on peut centrer à la fois verticalement et horizontalement un élément dans son élément parent.
La première condition à respecter est liée au centrage vertical. L'élément parent doit obligatoirement avoir une hauteur définie pour que l'on puisse centrer l'élément enfant. La classe "h-100" permet de fixer une hauteur égale à 100% pour que l'élément parent occupe toute la hauteur de son propre élément parent. On peut également définir une hauteur précise. Il suffit ensuite d'ajouter la classe "align-items-center" sur l'élément parent pour que les éléments enfants soient centrés verticalement.
Pour le centrage horizontal, il existe plusieurs possibilités. La classe "justify-content-center" permet de centrer horizontalement les colonnes dans une ligne.
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
Le texte contenu à cet endroit est centré verticalement et horizontalement.
</div>
</div>
On peut également faire appel à la classe "mx-auto" qui ajoute des marges automatiquement à gauche et à droite pour centrer un contenu. Cette classe peut également être utilisée en dehors du contexte "ligne-colonne".
<div class="h-100 align-items-center">
<div class="mx-auto">
Le texte contenu à cet endroit est centré verticalement et horizontalement.
</div>
</div>
Si vous souhaitez centrer horizontalement du contenu textuel ou le contenu d'une colonne, la classe "text-center" est celle que vous devez utiliser avec Bootstrap.