Tutoriel Bootstrap 5 – #7 Grille Bootstrap – Mise en page (2/2)

Dans cet article, nous allons vous guider étape par étape pour créer une mise en page responsive en utilisant Bootstrap. Nous allons couvrir les éléments suivants : les containers Bootstrap, la grille Bootstrap, les colonnes et l’espacement entre les colonnes.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Les Containers Bootstrap

Les containers sont des éléments essentiels dans Bootstrap. Ils permettent de créer une mise en page fluide et responsive. Pour utiliser un container, vous pouvez simplement ajouter la classe .container à votre div. Pour plus de détails et d’exemples, vous pouvez consulter la documentation Bootstrap sur les containers.

La Grille Bootstrap

La grille Bootstrap est basée sur un système de lignes et de colonnes. Pour commencer, vous devez créer une ligne en utilisant la classe .row dans votre HTML.

Ensuite, vous pouvez ajouter des colonnes à l’intérieur de cette ligne en utilisant la classe col. Par exemple, vous pouvez avoir une structure de colonnes comme suit :

<div class="row"> 
    <div class="col"> 
        Contenu de la colonne 1 
    </div> 
    <div class="col"> 
        Contenu de la colonne 2 
    </div> 
    <div class="col"> 
        Contenu de la colonne 3 
    </div> 
</div>

Pour plus d’exemples et d’options de personnalisation, vous pouvez vous référer à la documentation Bootstrap sur la grille.

Les Colonnes

Bootstrap utilise un système de grille basé sur 12 colonnes. Vous pouvez spécifier la largeur d’une colonne en utilisant les classes .col-{nombre}.

Par exemple, col-6 spécifie que la colonne doit occuper la moitié de la largeur de sa ligne parente. Vous pouvez combiner différentes classes pour obtenir des mises en page plus complexes. Pour plus de détails sur les classes disponibles, vous pouvez consulter la documentation Bootstrap sur les colonnes.

La Largeur des Colonnes

La largeur des colonnes dans Bootstrap peut être définie en utilisant les classes col-{nombre}. Voici comment procéder :

À l’intérieur de la ligne .row, ajoutez des divs avec les classes .col-{nombre} pour spécifier la largeur de chaque colonne. Par exemple, pour avoir deux colonnes de largeur égale, utilisez .col-6 pour chacune :

<div class="row">
  <div class="col-6">
    Contenu de la colonne 1
  </div>
  <div class="col-6">
    Contenu de la colonne 2
  </div>
</div>

Pour en savoir plus sur les différentes classes de largeur de colonne disponibles, vous pouvez consulter la documentation Bootstrap sur les colonnes

Vous pouvez ajuster les nombres pour obtenir des largeurs différentes. Assurez-vous simplement que la somme des colonnes dans une ligne est égale à 12 (la largeur de la grille Bootstrap).

Espacement entre Colonnes

Bootstrap propose des classes pour ajouter de l’espacement horizontal et vertical entre les colonnes. Voici comment procéder :

1. Ajoutez la classe row à votre div pour créer une ligne :

<div class="row">
  <!-- Vos colonnes ici -->
</div>

2. Pour ajouter un espacement horizontal entre les colonnes, utilisez la classe .gx-{nombre}. Par exemple, gx-3 ajoute un espacement horizontal de 3 unités entre les colonnes :

<div class="row gx-3">
  <!-- Vos colonnes ici -->
</div>

3. Pour ajouter un espacement vertical entre les colonnes, utilisez la classe .gy-{nombre}. Par exemple, gy-2 ajoute un espacement vertical de 2 unités entre les colonnes :

<div class="row gx-3 gy-2">
  <!-- Vos colonnes ici -->
</div>

Pour en savoir plus sur les classes d’espacement entre colonnes et leurs options de personnalisation, vous pouvez consulter la documentation Bootstrap sur l’espacement entre colonnes.

FAQ