Comment ajouter de l'espace entre les colonnes Bootstrap ?

Utilisation de classes CSS personnalisées

Une solution simple pour ajouter de l'espace entre les colonnes Bootstrap consiste à créer et à utiliser des classes CSS personnalisées. Cette méthode vous permet de contrôler l'espacement sans modifier la structure des colonnes.

Pour utiliser cette approche :

1. Créez une classe CSS personnalisée :

   .column-spacing {
   padding: 10px;
   margin: 10px;
   }

2. Appliquez la classe aux divs internes de vos colonnes :

   <div class="row">
   <div class="col-md-6">
   <div class="column-spacing">
     Contenu pour la colonne 1
   </div>
   </div>
   <div class="col-md-6">
   <div class="column-spacing">
     Contenu pour la colonne 2
   </div>
   </div>
   </div>

Cette méthode conserve la structure originale des colonnes tout en ajoutant l'espacement souhaité. Vous pouvez ajuster les valeurs de padding et de margin selon vos besoins de mise en page.

<div class="row">
  <div class="col-md-6 p-3 m-3">
    Contenu pour la colonne 1
  </div>
  <div class="col-md-6 p-3 m-3">
    Contenu pour la colonne 2
  </div>
</div>

Ajustement des largeurs de colonnes

Vous pouvez ajouter de l'espace entre les colonnes Bootstrap en ajustant leurs largeurs et en utilisant des classes d'offset. Au lieu d'utiliser col-md-6 pour deux colonnes égales, utilisez col-md-5 et ajoutez un offset :

<div class="row">
  <div class="col-md-5">Colonne 1</div>
  <div class="col-md-5 offset-md-2">Colonne 2</div>
</div>

Cette méthode a des avantages et des inconvénients :

Avantages :

• Facile à mettre en œuvre
• Utilise les classes Bootstrap

Inconvénients :

• Moins flexible pour les designs responsive
• Peut créer un espacement inégal sur différents écrans

<div class="row">
  <div class="col-md-5">Colonne 1</div>
  <div class="col-md-5 offset-md-2 offset-lg-1">Colonne 2</div>
</div>

Utilisation des utilitaires d'espacement de Bootstrap

Bootstrap propose des classes utilitaires d'espacement pour ajouter des marges et du padding aux colonnes :

• Les classes m-* ajoutent une marge
• Les classes p-* ajoutent du padding
• Le suffixe x pour l'espacement horizontal (gauche et droite)
• Le suffixe y pour l'espacement vertical (haut et bas)

Exemples :

<div class="row">
  <div class="col-md-6 px-3">Colonne avec padding horizontal</div>
  <div class="col-md-6 mx-2">Colonne avec marge horizontale</div>
</div>

Vous pouvez combiner ces classes pour plus de contrôle :

<div class="row">
  <div class="col-md-6 px-3 my-2">Colonne avec padding et marge</div>
  <div class="col-md-6 px-3 my-2">Colonne avec padding et marge</div>
</div>

Création d'un système de gouttière

Pour créer un système de gouttière personnalisé dans Bootstrap, vous pouvez utiliser des marges négatives et du rembourrage. Cette méthode vous donne plus de contrôle sur l'espacement entre les colonnes et fonctionne bien pour les designs responsifs.

Voici comment mettre en place un système de gouttière personnalisé :

1. Ajoutez une classe de conteneur avec des marges négatives :

   .gutter-container {
   margin-left: -15px;
   margin-right: -15px;
   }

2. Créez une classe de colonne avec du rembourrage :

   .gutter-col {
   padding-left: 15px;
   padding-right: 15px;
   }

3. Appliquez ces classes à votre HTML :

   <div class="row gutter-container">
   <div class="col-md-6 gutter-col">Colonne 1</div>
   <div class="col-md-6 gutter-col">Colonne 2</div>
   </div>

Ce système de gouttière personnalisé offre des avantages pour les designs responsifs :

• Espacement cohérent sur tous les formats d'écran
• Facilité d'ajustement de la largeur de la gouttière en modifiant les valeurs CSS
• Compatible avec le système de grille de Bootstrap

.gutter-container {
  margin-left: -30px;
  margin-right: -30px;
}

.gutter-col {
  padding-left: 30px;
  padding-right: 30px;
}

Utilisation de Flexbox pour l'espacement des colonnes

Bootstrap 4 et les versions ultérieures utilisent Flexbox pour leur système de grille. Vous pouvez utiliser les propriétés Flexbox pour contrôler l'espacement entre les colonnes.

Pour utiliser Flexbox pour l'espacement des colonnes :

1. Ajoutez la classe d-flex à votre ligne :

   <div class="row d-flex">
   <div class="col-md-6">Colonne 1</div>
   <div class="col-md-6">Colonne 2</div>
   </div>

2. Utilisez les classes utilitaires Flexbox pour ajuster l'espacement :

   • justify-content-between ajoute de l'espace entre les colonnes
   • justify-content-around ajoute de l'espace autour des colonnes

Exemple :

<div class="row d-flex justify-content-between">
  <div class="col-md-5">Colonne 1</div>
  <div class="col-md-5">Colonne 2</div>
</div>

Vous pouvez également utiliser la propriété gap pour les navigateurs modernes :

.row {
  display: flex;
  gap: 20px;
}

Cette approche Flexbox offre :

• Plus de contrôle sur l'alignement des colonnes
• Ajustement facile de l'espacement pour différentes tailles d'écran
• Compatibilité avec les classes responsives de Bootstrap

<div class="row d-flex align-items-center" style="height: 200px;">
  <div class="col-md-4">
    <p>Contenu court</p>
  </div>
  <div class="col-md-4">
    <p>Contenu plus grand qui prend plus d'espace vertical</p>
  </div>
  <div class="col-md-4">
    <p>Contenu court</p>
  </div>
</div>