Le système de grille Bootstrap

1. Objectifs

   • Être capable d'appeler le Bootstrap dans un document HTML
   • Connaitre le schéma de base d'une ligne de code Bootstrap

2. Présentation

   • En conception web, comme en typographie et en publication assistée par ordinateur, une grille est un quadrillage invisible sur lequel sont calés les contenus. Elle contient donc des colonnes (col) et parfois des lignes (row).
   • Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col).

• La grille Bootstrap est un système de grille fluide de 12 colonnes qui se réarrangent selon la taille de l'écran de l'utilisateur en fonction des critères que vous définissez.
• Chaque row (ce qui signifie un groupe de contenu) de votre code sera divisée en groupes horizontaux de colonnes, et Bootstrap vous fournit des classes prédéfinies pour définir la largeur de chaque colonne.

3. Utilisation et fonctionnement

   • Les systèmes de grille sont utilisés pour créer des mises en page à travers une série de lignes et de colonnes hébergeant votre contenu.

• Les lignes doivent être placées dans une classe .container pour un alignement et un remplissage correcte.
• Utilisez des lignes pour créer des groupes horizontaux de colonnes.
• Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être des enfants immédiats de lignes.
• Des classes de grille prédéfinies telles que .row et .col-xs-4 sont disponibles pour créer rapidement des présentations de grille. Les mixins LESS peuvent également être utilisés pour des mises en page plus sémantiques.
• Les colonnes créent des gouttières (espaces entre les contenus de colonne) via un remplissage. Ce remplissage est décalé en lignes pour les première et dernière colonnes via une marge négative sur .row.
• Les colonnes de grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez étendre. Par exemple, trois colonnes égales utiliseraient trois .col-xs-4

La classe container (.container)

• La classe conteneur est utilisée pour créer un contenu encadré. Il existe deux classes de conteneur dans Bootstrap:

.container

.container-fluid

• Les containeurs sont les composants les plus basiques de Bootstrap. Ils permettent de structurer la grille.
  • En utilisant la classe .container, on centre la grille sur une largeur maximale fixe. Celle-ci est variable suivant la largeur de la page.
  • En utilisant .container-fluid, on permet à la grille d'occuper 100 % de la largeur de la page.

La subtile différence entre les deux est essentielle.

• La classe .container possède une largeur maximale fixe suivant la largeur de la page web. En effet, Bootstrap réagit suivant plusieurs formats. Bootstrap 5 réagit suivant 6 formats. Le tableau ci-après récapitule les points clés.

Source: https://aymeric-auberton.fr/academie/bootstrap/chapitre-2-la-grille

En résumé : La différence clé

• .container (Largeur fixe par paliers / Centré) : Possède une largeur maximale fixe (max-width) qui s'adapte selon la taille de l'écran (breakpoints : Small, Medium, Large, XL, etc.). Il laisse des marges automatiques à gauche et à droite pour centré le contenu au milieu de la page.
• .container-fluid (Pleine largeur / 100%) : Occupe 100% de la largeur disponible de l'écran, quelle que soit la taille de la fenêtre (du smartphone au très grand écran ordinateur).

Exemple HTML/CSS illustré

Voici un code HTML complet à tester directement dans votre navigateur pour visualiser la différence :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Différence Container vs Container-Fluid</title>
    <!-- CSS Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-box {
            padding: 20px;
            color: white;
            font-weight: bold;
            text-align: center;
            border-radius: 6px;
        }
    </style>
</head>
<body class="bg-light py-4">

    <!-- EXAMPLE 1: .container -->
    <div class="container mb-4">
        <div class="demo-box bg-primary">
            <h3>.container</h3>
            <p class="mb-0">Largeur fixe adaptée à l'écran (centrée avec des marges latérales).</p>
        </div>
    </div>

    <!-- EXAMPLE 2: .container-fluid -->
    <div class="container-fluid">
        <div class="demo-box bg-success">
            <h3>.container-fluid</h3>
            <p class="mb-0">Largeur fluide de 100% (occupe toute la largeur de l'écran).</p>
        </div>
    </div>

</body>
</html>

Quand utiliser l'un ou l'autre ?

• Le tableau ci-dessus présente 6 classes dans le système de grille Bootstrap 5.
  • .col- (très petits appareils - largeur d'écran inférieure à 576 pixels)
  • .col-sm- (petits appareils - largeur de l'écran égale ou supérieure à 576 pixels)
  • .col-md- (périphériques de taille moyenne - largeur d'écran égale ou supérieure à 768 pixels)
  • .col-lg- (gros périphériques - largeur d'écran égale ou supérieure à 992px)
  • .col-xl- (xlarge devices - largeur d'écran égale ou supérieure à 1200px)
  • .col-xxl- (xlarge devices - largeur d'écran égale ou supérieure à 1400px)

• Les lignes (.row)

  • Les lignes de la grille Bootstrap sont là pour délimiter l'espace que prennent les colonnes au sein de la grille en fonction de la largeur d'écran.

• Les colonnes (.col-)

  • Le système de grille de Bootstrap comporte 12 unités appelées colonnes pouvant être utilisées pour mettre en forme le contenu horizontalement dans la fenêtre d'affichage.
  • Les colonnes sont donc les blocs qui vont contenir les éléments, et sont au number de 12.

4. Exercice pratique : Grille responsive (Mixed: mobile, tablet, and desktop)

• Objectif : Créer une mise en page réponsive en combinant plusieurs breakpoints Bootstrap 5 afin de reproduire l'interface ci-dessous.

Consignes :

1. Ajoutez un titre principal <h2> avec le texte : Mixed: mobile, tablet, and desktop.
2. Première rangée (row 1) :
   • Créez deux colonnes.
   • Sur mobile (< 576px), les deux colonnes s'empilent ou occupent chacune la largeur disponible selon leurs classes.
   • Sur tablette (≥ 576px), la 1ère colonne occupe 6 colonnes (.col-sm-6).
   • Sur grand écran (≥ 992px), la 1ère colonne prend 8 colonnes (.col-lg-8) et la 2ème prend 4 colonnes (.col-lg-4).
   • Les textes à afficher dans les blocs sont respectivement : .col-sm-6 .col-lg-8 et .col-6 .col-lg-4.
3. Deuxième rangée (row 2) :
   • Créez trois colonnes.
   • Sur mobile (< 576px), chaque colonne prend 6 colonnes de largeur (.col-6).
   • Sur tablette et ordinateur (≥ 576px), chaque colonne prend 4 colonnes (.col-sm-4).
   • Le texte à afficher dans les trois blocs est : .col-6 .col-sm-4.

Interface à réaliser :