Grille de Bootstrap 5 : De l'empilement à l'horizontal

Exemple de grille : Empilement horizontal

Créons un système de grille de base qui commence par s'empiler sur les appareils extrêmement petits et devient horizontal sur les appareils plus grands.

L'exemple suivant montre une mise en page simple en deux colonnes pour un "empilement horizontal", ce qui signifie qu'elle produira une division de 50%/50% sur tous les écrans, sauf sur les écrans extrêmement petits, où elle s'empile automatiquement (100%) :

Exemple : Empilement horizontal

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Colonne 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Colonne 2 ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Conseil :.col-sm-* Le nombre dans la classe indique combien de colonnes le div doit couvrir (sur un total de 12 colonnes). Donc,.col-sm-1 Sur 1 colonne,.col-sm-4 Sur 4 colonnes,.col-sm-6 Sur 6 colonnes, etc.

Remarque :Assurez-vous que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser tous les 12 colonnes disponibles) :

Conseil :En plaçant .container-fluid classe en .containerVous pouvez changer n'importe quelle full-width La mise en page passe en fixed-width La mise en page réactive :

Exemple : conteneur réactif

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Colonne 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Colonne 2 ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Colonnes de layout automatique

Dans Bootstrap 5, il existe une méthode simple pour créer des colonnes égales pour tous les appareils : il suffit de partir de .col-size-* Retirer les nombres et utiliser uniquement sur l'élément col .col-size Classe. Bootstrap reconnaît le nombre de colonnes, et chaque colonne obtient la même largeur. La classe de taille (sm, md, etc.) détermine quand une colonne doit répondre :

<!-- Deux colonnes : 50% de largeur sur tous les écrans, sauf les appareils ultra-petits (largeur de 100%) -->
<div class="row">
  <div class="col-sm">1 de 2</div>
  <div class="col-sm">2 de 2</div>
</div>
<!-- Quatre colonnes : 25% de largeur sur tous les écrans, sauf les appareils ultra-petits (largeur de 100%) -->
<div class="row">
  <div class="col-sm">1 de 4</div>
  <div class="col-sm">2 de 4</div>
  <div class="col-sm">3 de 4</div>
  <div class="col-sm">4 de 4</div>
</div>

Essayez-le vous-même