Colonnes

Apprenez à modifier les colonnes avec une poignée d'options d'alignement, de commande et de décalage grâce à notre système de grille flexbox. De plus, découvrez comment utiliser les classes de colonnes pour gérer les largeurs des éléments non-grille.

Sur cette page

La tête haute! Assurez-vous de lire la page Grille avant de vous plonger dans la modification et la personnalisation des colonnes de votre grille.

Comment ils travaillent

Les colonnes s'appuient sur l'architecture flexbox de la grille. Flexbox signifie que nous avons des options pour changer des colonnes individuelles et modifier des groupes de colonnes au niveau de la ligne . Vous choisissez comment les colonnes grossissent, rétrécissent ou changent autrement.
Lors de la création de mises en page en grille, tout le contenu est placé dans des colonnes. La hiérarchie de la grille de Bootstrap va du conteneur à la ligne en passant par la colonne jusqu'à votre contenu. En de rares occasions, vous pouvez combiner contenu et colonne, mais sachez qu'il peut y avoir des conséquences imprévues.
Bootstrap inclut des classes prédéfinies pour créer des mises en page rapides et réactives. Avec six points d'arrêt et une douzaine de colonnes à chaque niveau de grille, nous avons déjà des dizaines de classes conçues pour vous permettre de créer les mises en page souhaitées. Cela peut être désactivé via Sass si vous le souhaitez.

Alignement

Utilisez les utilitaires d'alignement Flexbox pour aligner verticalement et horizontalement les colonnes.

Alignement vertical

Une des trois colonnes

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Une des trois colonnes

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alignement horizontal

Une des deux colonnes

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Emballage de colonne

Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une unité, enveloppé sur une nouvelle ligne.

.col-9

.col-4
Puisque 9 + 4 = 13 > 12, cette div à 4 colonnes est enveloppée sur une nouvelle ligne comme une unité contiguë.

.col-6
Les colonnes suivantes continuent le long de la nouvelle ligne.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Sauts de colonne

Briser les colonnes sur une nouvelle ligne dans flexbox nécessite un petit hack : ajoutez un élément à l' width: 100%endroit où vous souhaitez envelopper vos colonnes sur une nouvelle ligne. Normalement, cela est accompli avec plusieurs .rows, mais toutes les méthodes d'implémentation ne peuvent pas en tenir compte.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Vous pouvez également appliquer cette pause à des points d'arrêt spécifiques avec nos utilitaires d'affichage réactifs .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Réorganisation

Cours de commande

Utilisez .order-des classes pour contrôler l' ordre visuel de votre contenu. Ces classes sont réactives, vous pouvez donc définir le orderpar point d'arrêt (par exemple, .order-1.order-md-2). Inclut la prise en charge de 1l' 5ensemble des six niveaux de grille.

Premier dans les DOM, aucun ordre appliqué

Deuxième dans les DOM, avec une commande plus importante

Troisième dans DOM, avec un ordre de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Il existe également des classes responsive .order-firstet qui modifient le d'un élément en appliquant et , respectivement. Ces classes peuvent également être mélangées avec les classes numérotées selon les besoins..order-lastorderorder: -1order: 6.order-*

Premier dans DOM, commandé en dernier

Deuxième dans DOM, non ordonné

Troisième dans DOM, commandé premier

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Colonnes de décalage

Vous pouvez décaler les colonnes de la grille de deux manières : nos .offset-classes de grille réactives et nos utilitaires de marge . Les classes de grille sont dimensionnées pour correspondre aux colonnes tandis que les marges sont plus utiles pour les mises en page rapides où la largeur du décalage est variable.

Classes de décalage

Déplacez les colonnes vers la droite à l'aide des .offset-md-*classes. Ces classes augmentent la marge gauche d'une colonne par *colonnes. Par exemple, .offset-md-4se déplace .col-md-4sur quatre colonnes.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Outre l'effacement des colonnes aux points d'arrêt réactifs, vous devrez peut-être réinitialiser les décalages. Voyez ceci en action dans l'exemple de grille .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilitaires de marge

Avec le passage à flexbox dans la v4, vous pouvez utiliser des utilitaires de marge tels .me-autoque forcer les colonnes sœurs à s'éloigner les unes des autres.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Classes de colonnes autonomes

Les .col-*classes peuvent également être utilisées en dehors de a .rowpour donner à un élément une largeur spécifique. Chaque fois que des classes de colonnes sont utilisées comme enfants non directs d'une ligne, les remplissages sont omis.

.col-3 : largeur de 25 %

.col-sm-9 : largeur de 75 % au-dessus du point d'arrêt sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Les classes peuvent être utilisées avec des utilitaires pour créer des images flottantes réactives. Assurez-vous d'envelopper le contenu dans un .clearfixwrapper pour effacer le flotteur si le texte est plus court.

Un paragraphe de texte d'espace réservé. Nous l'utilisons ici pour montrer l'utilisation de la classe clearfix. Nous ajoutons ici quelques phrases dénuées de sens pour montrer comment les colonnes interagissent ici avec l'image flottante.

Comme vous pouvez le voir, les paragraphes s'enroulent gracieusement autour de l'image flottante. Maintenant, imaginez à quoi cela ressemblerait avec du contenu réel ici, plutôt que simplement ce texte d'espace réservé ennuyeux qui continue encore et encore, mais ne transmet en fait aucune information tangible. Il prend simplement de la place et ne doit pas vraiment être lu.

Et pourtant, vous êtes là, persévérant dans la lecture de ce texte fictif, espérant plus d'idées ou un œuf de Pâques caché de contenu. Une blague, peut-être. Malheureusement, il n'y a rien de tout cela ici.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>