Chapitre 3 : Le système de Grille (Grid System)

1. Concept de base

Le système de grille de Bootstrap permet de créer des mises en page complexes et réactives. Il est basé sur Flexbox et divise la largeur de la page en 12 colonnes.

2. Container, Row et Col

• .container : Centre votre contenu et définit une largeur maximale.
• .row : Crée une ligne (indispensable pour contenir des colonnes).
• .col : Crée une colonne.

<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>

3. Largeurs spécifiques

Vous pouvez spécifier le nombre de colonnes (sur un total de 12) qu'un élément doit occuper.

<div class="row">
    <div class="col-8">Menu principal (8/12)</div>
    <div class="col-4">Sidebar (4/12)</div>
</div>

4. Responsive Design (Breakpoints)

Utilisez les préfixes pour changer la mise en page selon la taille de l'écran :

• col- (mobile)
• col-sm- (tablette)
• col-md- (ordinateur portable)
• col-lg- (grand écran)