Aller au contenu principal

Module Bootstrap.2 – Grille Bootstrap

Objectif​

Maîtriser le système de grille Bootstrap : containers, rows, cols, grille responsive pour créer des layouts professionnels et adaptatifs.

Théorie​

Système de grille Bootstrap​

Principe : 12 colonnes flexibles et responsive.

Composants :

  • Container : Conteneur principal
  • Row : Ligne
  • Col : Colonne

Structure de base :

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

Containers​

Types de containers :

.container​

Container responsive avec max-width selon breakpoint.

<div class="container">
    <!-- Contenu -->
</div>

Max-widths :

  • xs: 100% (pas de breakpoint)
  • sm: 540px
  • md: 720px
  • lg: 960px
  • xl: 1140px
  • xxl: 1320px

.container-fluid​

Container full-width (100% de la largeur).

<div class="container-fluid">
    <!-- Contenu full-width -->
</div>

Containers responsives​

<div class="container-sm">...</div>
<div class="container-md">...</div>
<div class="container-lg">...</div>
<div class="container-xl">...</div>
<div class="container-xxl">...</div>

Rows​

.row : Ligne qui contient les colonnes.

<div class="container">
    <div class="row">
        <!-- Colonnes ici -->
    </div>
</div>

Gutters (espacement) :

<!-- Gutter par défaut (1.5rem) -->
<div class="row">

<!-- Gutter personnalisé -->
<div class="row g-0">   <!-- Pas de gutter -->
<div class="row g-1">   <!-- Petit gutter -->
<div class="row g-2">   <!-- Gutter moyen -->
<div class="row g-3">   <!-- Grand gutter -->
<div class="row g-4">   <!-- Très grand gutter -->
<div class="row g-5">   <!-- Gutter maximum -->

Gutters verticaux :

<div class="row gy-3">  <!-- Vertical -->
<div class="row gx-4">  <!-- Horizontal -->

Colonnes​

Colonnes égales​

<div class="row">
    <div class="col">Colonne 1</div>
    <div class="col">Colonne 2</div>
    <div class="col">Colonne 3</div>
</div>
<!-- 3 colonnes égales (4 colonnes chacune) -->

Colonnes avec taille​

<div class="row">
    <div class="col-6">6 colonnes</div>
    <div class="col-6">6 colonnes</div>
</div>

<div class="row">
    <div class="col-4">4 colonnes</div>
    <div class="col-4">4 colonnes</div>
    <div class="col-4">4 colonnes</div>
</div>

Total = 12 colonnes :

  • col-1 à col-12
  • col-6 = 50% (6/12)
  • col-4 = 33.333% (4/12)
  • col-3 = 25% (3/12)

Colonnes responsive​

Breakpoints Bootstrap :

  • xs: < 576px (pas de préfixe)
  • sm: ≥ 576px
  • md: ≥ 768px
  • lg: ≥ 992px
  • xl: ≥ 1200px
  • xxl: ≥ 1400px

Syntaxe : col-{breakpoint}-{nombre}

<div class="row">
    <!-- Mobile : 12 colonnes (full width) -->
    <!-- Tablet : 6 colonnes (50%) -->
    <!-- Desktop : 4 colonnes (33%) -->
    <div class="col-12 col-md-6 col-lg-4">Colonne 1</div>
    <div class="col-12 col-md-6 col-lg-4">Colonne 2</div>
    <div class="col-12 col-md-6 col-lg-4">Colonne 3</div>
</div>

Explication :

  • col-12 : Mobile (12 colonnes = 100%)
  • col-md-6 : Tablet et plus (6 colonnes = 50%)
  • col-lg-4 : Desktop et plus (4 colonnes = 33%)

Colonnes auto​

<div class="row">
    <div class="col-auto">Taille selon contenu</div>
    <div class="col">Prend l'espace restant</div>
</div>

Colonnes avec offset​

<div class="row">
    <div class="col-4 offset-4">Centré (offset de 4)</div>
</div>

<div class="row">
    <div class="col-4 offset-md-4">Offset seulement sur md+</div>
</div>

Exemples pratiques​

Layout 2 colonnes​

<div class="container">
    <div class="row">
        <div class="col-md-8">Contenu principal</div>
        <div class="col-md-4">Sidebar</div>
    </div>
</div>

Layout 3 colonnes​

<div class="container">
    <div class="row">
        <div class="col-md-3">Sidebar gauche</div>
        <div class="col-md-6">Contenu principal</div>
        <div class="col-md-3">Sidebar droite</div>
    </div>
</div>

Cards en grille​

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">Card 1</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">Card 2</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">Card 3</div>
        </div>
    </div>
</div>

Alignement​

Alignement vertical​

<div class="row align-items-start">   <!-- Haut -->
<div class="row align-items-center">   <!-- Centre -->
<div class="row align-items-end">      <!-- Bas -->

Par colonne :

<div class="row">
    <div class="col align-self-start">Haut</div>
    <div class="col align-self-center">Centre</div>
    <div class="col align-self-end">Bas</div>
</div>

Alignement horizontal​

<div class="row justify-content-start">    <!-- Gauche -->
<div class="row justify-content-center">   <!-- Centre -->
<div class="row justify-content-end">      <!-- Droite -->
<div class="row justify-content-between">  <!-- Espace entre -->
<div class="row justify-content-around">   <!-- Espace autour -->
<div class="row justify-content-evenly">   <!-- Espace égal -->

Ordre des colonnes​

Réorganiser avec order :

<div class="row">
    <div class="col order-3">Colonne 3 (affichée en 1er)</div>
    <div class="col order-1">Colonne 1 (affichée en 2ème)</div>
    <div class="col order-2">Colonne 2 (affichée en 3ème)</div>
</div>

Order responsive :

<div class="col order-md-2 order-lg-1">Colonne</div>

Exercices guidés​

Exercice 1 : Grille de base​

Créez une grille avec :

  • Container
  • Row
  • 3 colonnes égales
  • Testez le responsive

Exercice 2 : Colonnes responsive​

Créez un layout :

  • Mobile : 1 colonne (full width)
  • Tablet : 2 colonnes
  • Desktop : 3 colonnes

Exercice 3 : Layout complexe​

Créez un layout :

  • Sidebar (3 colonnes)
  • Contenu principal (6 colonnes)
  • Sidebar droite (3 colonnes)
  • Responsive approprié

Exercice 4 : Alignement​

Testez les alignements :

  • Vertical (align-items)
  • Horizontal (justify-content)
  • Par colonne (align-self)

Exercice 5 : Cards en grille​

Créez une grille de cards :

  • 3 colonnes sur desktop
  • 2 colonnes sur tablette
  • 1 colonne sur mobile
  • Espacement cohérent

❌ Erreurs fréquentes​

Erreur 1 : Oublier le container​

❌ Mauvais :

<div class="row">
    <div class="col">Colonne</div>
</div>

✅ Bon :

<div class="container">
    <div class="row">
        <div class="col">Colonne</div>
    </div>
</div>

Pourquoi : Container = padding et max-width.

Erreur 2 : Colonnes > 12​

❌ Mauvais :

<div class="row">
    <div class="col-8">8</div>
    <div class="col-6">6</div>
    <!-- Total = 14 (dépasse 12) -->
</div>

✅ Bon :

<div class="row">
    <div class="col-8">8</div>
    <div class="col-4">4</div>
    <!-- Total = 12 -->
</div>

Pourquoi : Système de 12 colonnes.

Erreur 3 : Oublier le row​

❌ Mauvais :

<div class="container">
    <div class="col-6">Colonne</div>
</div>

✅ Bon :

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

Pourquoi : Row = contexte flex pour colonnes.

Erreur 4 : Breakpoints dans le mauvais ordre​

❌ Mauvais :

<div class="col-lg-4 col-md-6 col-12">

✅ Bon :

<div class="col-12 col-md-6 col-lg-4">

Pourquoi : Mobile-first : petit → grand.

Erreur 5 : Confondre container et container-fluid​

❌ Mauvais :

<!-- Besoin de full-width mais utilise container -->
<div class="container">
    <div class="hero">Hero full-width</div>
</div>

✅ Bon :

<div class="container-fluid">
    <div class="hero">Hero full-width</div>
</div>

Pourquoi : container-fluid = 100% largeur.

🚀 Mini-projet​

Mission : Créer un layout responsive complet

Créez une page avec :

Layout :

  • Header full-width
  • Container principal
  • Sidebar + contenu + aside
  • Footer full-width

Grille :

  • Mobile : 1 colonne
  • Tablet : 2 colonnes (sidebar + contenu)
  • Desktop : 3 colonnes (sidebar + contenu + aside)

Critères :

  • ✅ Container approprié
  • ✅ Grille responsive
  • ✅ Alignement correct
  • ✅ Espacement cohérent
  • ✅ Layout professionnel

Objectif : Maîtriser le système de grille Bootstrap pour créer des layouts responsive.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez containers, rows, cols et créez des layouts responsive avec la grille Bootstrap.