Démonstration du système de grille Bootstrap - Responsive

Voici différentes configurations de colonnes avec classes responsives (sm, md, lg) montrant comment la grille s'adapte aux différentes tailles d'écran.

1. Deux colonnes égales (col-lg-6 col-md-12)

Colonne 1 (lg-6, md-12)
Colonne 2 (lg-6, md-12)
<div class="row">
  <div class="col-lg-6 col-md-12">Colonne 1</div>
  <div class="col-lg-6 col-md-12">Colonne 2</div>
</div>

2. Trois colonnes égales (col-lg-4 col-md-6 col-sm-12)

Colonne 1 (lg-4, md-6, sm-12)
Colonne 2 (lg-4, md-6, sm-12)
Colonne 3 (lg-4, md-6, sm-12)
<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-12">Colonne 1</div>
  <div class="col-lg-4 col-md-6 col-sm-12">Colonne 2</div>
  <div class="col-lg-4 col-md-6 col-sm-12">Colonne 3</div>
</div>

3. Quatre colonnes égales (col-lg-3 col-md-6 col-sm-12)

Colonne 1 (lg-3, md-6, sm-12)
Colonne 2 (lg-3, md-6, sm-12)
Colonne 3 (lg-3, md-6, sm-12)
Colonne 4 (lg-3, md-6, sm-12)
<div class="row">
  <div class="col-lg-3 col-md-6 col-sm-12">Colonne 1</div>
  <div class="col-lg-3 col-md-6 col-sm-12">Colonne 2</div>
  <div class="col-lg-3 col-md-6 col-sm-12">Colonne 3</div>
  <div class="col-lg-3 col-md-6 col-sm-12">Colonne 4</div>
</div>

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

Contenu principal (lg-8, md-12)
Barre latérale (lg-4, md-12)
<div class="row">
  <div class="col-lg-8 col-md-12">Contenu principal</div>
  <div class="col-lg-4 col-md-12">Barre latérale</div>
</div>

5. Douze colonnes égales (col-1)

1
2
3
4
5
6
7
8
9
10
11
12
<div class="row">
  <div class="col-1">1</div>
  <div class="col-1">2</div>
  <!-- ... jusqu'à 12 -->
</div>
Explication du responsive :
Points de rupture Bootstrap :