Comment centrer une colonne en utilisant Bootstrap ?
Le framework CSS utilise une organisation de page en grille. Il est cependant possible de n'utiliser qu'une partie de la grille et la centrer dans la page.
Bootstrap est un framework CSS qui utilise une organisation de page en grille. Il est quand même possible de ne pas remplir toute la grille et de n'en utiliser qu'une partie que l'on peut centrer dans la page.
Si vous utilisez une version de Bootstrap supérieure ou égale à la version 3, l'équipe de développement de Bootstrap a ajouté une classe center-block, qui centre un contenu dans la grille :
<div class=center-block>...</div>
Mais cette classe ne fonctionne pas avec le système de colonnes. Pour que le contenu soit bien centré avec les colonnes, il faut désactiver les propriétés flottantes de la colonne avec la propriété CSS float : none; :
<div class=row> <div class=center-block style=float:none;></div> </div>
Si votre version de Bootstrap est plus ancienne, il existe cependant des méthodes pour centrer un contenu. La première consiste à utiliser le système de colonnes et à définir le nombre de colonnes situées en marge de chaque côté du contenu, grâce à la classe col-X-offset (X est le format d'écran utilisé pour l'affichage).
Par exemple, on peut choisir que notre contenu occupe une taille de 2 colonnes avec 5 colonnes de part et d'autre :
<div class=row> <div class=col-md-2 col-md-offset-5></div> </div>
Cette technique ne fonctionne que pour un contenu qui occupe un nombre de colonnes pair (col-X-2, col-X-4, col-X-6, col-X-8, col-X-10).
La deuxième technique est une technique de CSS qui est dérivée de la classe center-block de la version 3 de Bootstrap. Cette classe utilise les marges en les définissant à 0 pour les marges verticales et à auto pour les marges horizontales, ce qui centre le contenu sur la largeur. Il suffit de créer une classe CSS reprenant cette propriété et d'y ajouter la propriété manquante float:none; pour obtenir une classe permettant de centrer une colonne dans la grille :
/* CSS */
.colonne-centree
{
float: none;
margin: 0 auto;
}
<!-- HTML -->
<div class=row>
<div class=col-md-1 colonne-centree></div>
</div>