Easy-Micro

LOGICIEL Bootstrap
Alignement

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

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>
 > Voir cet exemple Easy-Micro

Par exemple, .offset-md-4 déplace .col-md-4 de quatre colonnes

Pour aller plus loin...


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]