web-dev-qa-db-fra.com

Comment centrer les cartes dans bootstrap 4?

J'utilise bootstrap 4 alpha 3.
Je souhaite centrer la carte horizontalement au centre de la page.

Preview / link:http://codepen.io/vaibhavsingh97/full/VjRAXW

J'ai essayé toutes les différentes options listées sur la page d'exemple bootstrap 4 pour les cartes.

Comment puis-je atteindre cet objectif?

htmlcssbootstrap-4
31
Vaibhav Singh

Ajouter le css pour .card

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

voici le stylo

UPDATE: Vous pouvez utiliser la classe .mx-auto disponible dans bootstrap 4 pour centrer les cartes.

49
Shahil M

Mise à jour 2018

Il n'y a pas besoin de CSS supplémentaire, et il existe plusieurs méthodes de centrage dans Bootstrap 4:

  • text-center pour le centre display:inline éléments
  • mx-auto pour centrer display:block éléments à l'intérieur de display:flex (d-flex)
  • offset-* ou mx-auto peut être utilisé pour centrer les colonnes de la grille
  • ou justify-content-center sur row pour centrer les colonnes de la grille

mx-auto (les marges de l'axe x automatique) seront centrés à l'intérieur de display:flex éléments ayant une largeur définie (%, vw, px, etc.). Flexbox est utilisé par défaut sur les colonnes de la grille. Il existe donc également différentes méthodes de centrage .

Dans votre cas, vous pouvez simplement mx-auto au cards.

59
Zim