Démo Grille Bootstrap

Démonstration du système de grille Bootstrap

Voici différentes configurations de colonnes dans le système de grille à 12 colonnes de Bootstrap.

1. Deux colonnes égales (col-6)

Colonne 1 (col-6)

Colonne 2 (col-6)

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

2. Trois colonnes égales (col-4)

Colonne 1 (col-4)

Colonne 2 (col-4)

Colonne 3 (col-4)

<div class="row"> <div class="col-4">Colonne 1</div> <div class="col-4">Colonne 2</div> <div class="col-4">Colonne 3</div> </div>

3. Quatre colonnes égales (col-3)

Colonne 1 (col-3)

Colonne 2 (col-3)

Colonne 3 (col-3)

Colonne 4 (col-3)

<div class="row"> <div class="col-3">Colonne 1</div> <div class="col-3">Colonne 2</div> <div class="col-3">Colonne 3</div> <div class="col-3">Colonne 4</div> </div>

4. Colonnes asymétriques (col-8 + col-4)

Contenu principal (col-8)

Barre latérale (col-4)

<div class="row"> <div class="col-8">Contenu principal</div> <div class="col-4">Barre latérale</div> </div>

5. Douze colonnes égales (col-1)

<div class="row"> <div class="col-1">1</div> <div class="col-1">2</div>  </div>

Explication de la structure HTML :

Classe row : Crée une rangée horizontale qui contient les colonnes. Elle utilise Flexbox pour aligner les colonnes côte à côte et gérer l'espacement.
Classes col-* : Définissent la largeur des colonnes en fractions de 12 (ex. : col-6 = 6/12 = 50%, col-4 = 4/12 ≈ 33.33%).
Structure hiérarchique : Toujours container > row > col-* pour une grille Bootstrap fonctionnelle.

Code CSS équivalent :

/* Classe .row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Exemple : Classe .col-6 */
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}