Bootstrap 5 : grille empilée à l'horizontale

Table des matières

Exemple de grille : empilée à horizontale

Créons un système de grille de base qui commence par être empilé sur de très petits appareils, avant de devenir horizontal sur des appareils plus grands.

L'exemple suivant montre une disposition simple à deux colonnes « empilée à horizontale », ce qui signifie qu'elle entraînera une répartition de 50 %/50 % sur tous les écrans, à l'exception des très petits écrans, qu'elle empilera automatiquement (100 %) :

col-sm-6

Exemple : empilé à l'horizontale

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Grid Example</h1>
  <p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>      
  <p>Resize the browser window to see the effect.</p> 
  <div class="row">
    <div class="col-sm-6 bg-primary text-white p-3">
      Lorem ipsum...
    </div>
    <div class="col-sm-6 bg-dark text-white p-3">
      Sed ut perspiciatis...
    </div>
  </div>
</div>

</body>
</html>

Astuce : Les nombres dans les classes .col-sm-* indiquent le nombre de colonnes que le div doit couvrir (sur 12). Ainsi, .col-sm-1 s'étend sur 1 colonne, .col-sm-4 s'étend sur 4 colonnes, .col-sm-6 s'étend sur 6 colonnes, etc.

Remarque : Assurez-vous que la somme totalise 12 ou moins (il n'est pas obligatoire d'utiliser les 12 colonnes disponibles) :

Conseil : Vous pouvez transformer n'importe quelle mise en page pleine largeur en une mise en page à largeur fixe responsive en modifiant le code class="w3-codespan">.container-fluid en .container :

Exemple : conteneur réactif

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Grid Example</h1>
  <p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>      
  <p>Resize the browser window to see the effect.</p> 
  <div class="row">
    <div class="col-sm-6 bg-primary text-white p-3">
      Lorem ipsum...
    </div>
    <div class="col-sm-6 bg-dark text-white p-3">
      Sed ut perspiciatis...
    </div>
  </div>
</div>

</body>
</html>

Colonnes de disposition automatique

Dans Bootstrap 5, il existe un moyen simple de créer des colonnes de largeur égale pour tous les appareils : supprimez simplement le numéro de .col-size-* et utilisez uniquement la classe .col-size sur un nombre spécifié d'éléments col. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur. Les classes size (sm, md, etc.) déterminent quand les colonnes doivent être réactives :

<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Auto Layout Columns</h1>
  <p>In Bootstrap 5, there is an easy way to create equal width columns: just use the <code>.col-size</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
  <p>Two columns: 50% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white p-3">1 of 2</div>
      <div class="col-sm bg-dark text-white p-3">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white p-3">1 of 4</div>
      <div class="col-sm bg-dark text-white p-3">2 of 4</div>
      <div class="col-sm bg-primary text-white p-3">3 of 4</div>
      <div class="col-sm bg-dark text-white p-3">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>