BootstrapAlignement
Utilisez les classes align-items-* et justify-content-* pour aligner vos colonnes
Alignement vertical
Pour toute les colonnes, on utilise les classes align-items-start, align-items-center ou align-items-end. Pour une seul colonne, on utilise les classes align-self-start, align-self-center ou align-self-end<div class="container">
<div class="row align-items-start">
<div class="col">Contenu</div>
<div class="col">Contenu</div>
<div class="col">Contenu</div>
</div>
</div>Alignement horizontal
Pour toute les colonnes, on utilise les classes justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between ou justify-content-evenly.<div class="container">
<div class="row justify-content-start">
<div class="col-4">Contenu</div>
<div class="col-4">Contenu</div>
</div>
</div>Alignement vertical par colonne
<div class="container">
<div class="row">
<div class="col align-self-start">Contenu</div>
<div class="col align-self-center">Contenu</div>
<div class="col align-self-end">Contenu</div>
</div>
</div>Une ligne de plus de 12 colonnes
<div class="container">
<div class="row">
<div class="col-9">col-9</div>
<div class="co-4">col-4</div>
<div class="col-6">col-6</div>
</div>
</div>Forcer un saut de colonne
Casser des colonnes en une nouvelle ligne nécessite un petit hack: ajoutez un div avec la classe w-100 (soit width:100%) où vous voulez revenir à la ligne.<div class="container">
<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 la colonne suivante à revenir à la ligne -->
<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>
</div>Ordre des colonnes
Classes pour contrôler l'ordre visuel de votre contenu.<div class="container">
<div class="row">
<div class="col">
Première colonne, aucune commande appliquée
</div>
<div class="col order-5">
Deuxième colonne, avec une commande plus importante
</div>
<div class="col order-1">
Troisième colonne, avec un ordre de 1
</div>
</div>
</div>Il existe également les classes responsive .order-first et .order-last.
Décaler des colonnes
<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>Par exemple, .offset-md-4 déplace .col-md-4 de quatre colonnes
