Un contenu doit toujours être dans une "ligne"
Dans un site utilisant Bootstrap, la structure repose toujours sur une grille composée de lignes et de colonnes.
➡️ Une "ligne" (row) est le conteneur horizontal dans lequel on place les éléments de mise en page.
À l’intérieur de chaque ligne, on doit placer des colonnes. Chaque colonne représente une division verticale de l’espace, que Bootstrap gère sur une base de 12 unités.
Ici, on voit une ligne composée de deux colonnes (qui sont composée de 6 unités chacunes).
Chacune de ces colonnes peut accueillir le contenu de votre choix.
Cet élément est indispensable à la bonne mise en forme du contenus sur le site !
🧱 Comprendre les colonnes
Cette colonne occupe un tiers de la largeur totale.
Elle partage l’espace équitablement avec les deux autres.
Toutes les colonnes de cette ligne ont la même largeur.
C’est la disposition par défaut quand on choisit “3 colonnes”.
Tous les sites conçus avec Bootstrap utilisent une grille de 12 colonnes.
Cela permet de diviser facilement l’espace en parts égales ou personnalisées, et d’assurer un alignement cohérent sur tous les écrans.
Ici, cette colonne est plus étroite que celles de la ligne du dessus.
Elle pourrait correspondre à une classe col-3.
Cette colonne est plus large, elle prend davantage d’espace.
On pourrait imaginer une classe comme col-6.
Malgré sa taille plus réduite, cette colonne complète la ligne.
L’ensemble des 3 colonnes remplit exactement 100% de l’espace.
📱 Adapter la largeur des colonnes selon la taille de l’écran
Bootstrap permet de rendre un site responsive : cela signifie que les blocs peuvent changer de taille automatiquement selon la taille de l’écran (mobile, tablette, ordinateur…).
Dans Gutenberg, chaque colonne Bootstrap a ses propres réglages pour chaque type d'appareil.
🧭 Panneau "Column size" : comment ça fonctionne ?
Ce panneau te permet de définir la largeur de chaque colonne selon 5 paliers d'écran :
| Appareil | Classe Bootstrap | Exemple |
|---|---|---|
| Extra small devices (téléphones) | col- | col-12, col-6, etc. |
| Small devices (petites tablettes) | col-sm- | col-sm-6 |
| Medium devices (tablettes) | col-md- | col-md-3 |
| Large devices (desktop classiques) | col-lg- | col-lg-4 |
| Extra large devices (grands écrans) | col-xl- | col-xl-2 |
↔️ Panneau Décalage de colonne (Offset)
Le décalage de colonne permet de laisser un espace vide avant une colonne, comme si on déplaçait la colonne vers la droite.
C’est très utile pour :
- Centrer un bloc sans utiliser tout l’espace
- Créer des compositions asymétriques
- Ajouter de l’air entre des éléments
🎨 Ajouter des classes Bootstrap aux éléments
Dans Gutenberg, il est possible d’ajouter des classes CSS Bootstrap à la plupart des blocs via le panneau latéral "Avancé", dans le champ "Classe CSS additionnelle".
Cela permet d'appliquer rapidement des styles Bootstrap sans avoir à écrire de code HTML.
Classes Bootstrap essentielles
img-fluid
La classe img-fluid est indispensable pour les images.
Elle permet à une image de s’adapter automatiquement à la largeur de son conteneur, évitant ainsi qu’elle déborde ou déforme la mise en page.
👉 À ajouter à tout bloc image dans Gutenberg.
Espacements : les classes de marge (m)
Bootstrap fournit des classes très utiles pour gérer les espaces autour des éléments. Les chiffres vont de 0 (aucun espace) à 5 (espace important).
| Classe | Effet |
|---|---|
m-3 | marge externe uniforme |
mt-5 | marge en haut (top) |
mb-2 | marge en bas (bottom) |
ms-4 | marge à gauche (start) |
me-2 | marge à droite (end) |
Boutons stylisés : btn, btn-primary, btn-secondary
Dans tous nos sites conçus avec Bootstrap, la charte graphique prévoit deux styles de boutons :
- un bouton principal (souvent de couleur vive, utilisé pour les actions importantes),
- et un bouton secondaire (plus discret, utilisé pour les actions complémentaires).
Ces boutons sont facilement appliqués en utilisant les classes Bootstrap suivantes :
btn: classe de base, obligatoire pour activer le style boutonbtn-primary: bouton principalbtn-secondary: bouton secondaire
📌 Il suffit d’ajouter ces classes à un lien (<a>) pour le transformer automatiquement en bouton stylisé.
Exemple de boutons
primaire
secondaire
🧩 Créer un modèle réutilisable avec "Create pattern"
Dans l’éditeur Gutenberg, il est possible de sauvegarder une combinaison de blocs (par exemple une ligne avec ses colonnes et leur contenu) pour pouvoir la réutiliser facilement ailleurs sur le site.
C’est exactement ce que permet la fonction "Create pattern", visible dans le menu d’un bloc ou d’un groupe de blocs.
Comment créer un pattern
- Sélectionner le bloc ou le groupe de blocs à enregistrer.
- Cliquer sur les trois petits points (︙) à droite du bloc.
- Choisir "Create pattern".
- Donner un nom au modèle.
- Définir si le pattern doit être :
- verrouillé (locked) ou non (modifiable),
- disponible globalement (pattern du site) ou uniquement dans une page.
Où retrouver les patterns ?
Une fois créés, les patterns sont accessibles :
- via le bouton "+" bleu
- dans l’onglet "Patterns",
- sous la catégorie "Mes modèles" / "My patterns" ou le nom défini.
À quoi ça sert ?
Créer un pattern (ou "modèle personnalisé") permet de :
- Gagner du temps : plus besoin de reconstruire manuellement une mise en page répétitive.
- Assurer la cohérence : le design et la structure restent identiques partout.
- Simplifier l’édition pour des collègues non techniques.
🛡️ Conseils de sécurité avant de modifier un bloc
Lorsque l’on travaille avec des blocs imbriqués (lignes, colonnes, groupes…), une mauvaise manipulation peut casser la mise en page ou supprimer un bloc complet sans s’en rendre compte. Voici quelques réflexes à adopter avant toute modification :
✅ 1. Vérifier la structure dans l’arborescence
Toujours consulter le plan des blocs (liste de blocs) à gauche (via l’icône en haut à gauche "Plan de document").
- Cela permet de visualiser dans quel bloc on se trouve (par exemple : Colonne > Groupe > Paragraphe).
- On évite ainsi de supprimer une colonne entière en pensant supprimer un simple texte.
🧭 2. Sélectionner précisément le bon bloc
Cliquer directement sur l’étiquette du bloc souhaité (par exemple "Paragraphe" ou "Image") dans la liste ou dans le contenu.
💡 Astuce : passer par la liste de blocs est souvent plus fiable que de cliquer à la souris dans l’éditeur visuel (où Gutenberg sélectionne parfois un bloc parent sans le signaler clairement).
🗂️ 3. Faire une copie ou dupliquer avant modification
Avant de modifier un bloc complexe (ex. : ligne avec plusieurs colonnes), il est fortement recommandé de :
- Dupliquer le bloc (
Ctrl + Shift + Dou clic droit > Duplicate) - Ou le copier (
Ctrl + Cou clic droit > Copy)
Cela permet de revenir facilement en arrière en cas d’erreur.
🧩 4. Ne jamais supprimer sans vérifier le contexte
Si un bloc semble vide ou qu’on veut le remplacer, toujours vérifier sa position dans la structure avant de le supprimer.
❌ Supprimer une colonne ou un groupe par erreur peut faire disparaître tous les blocs qu’il contient.
❌ Attention à la suppression involontaire de blocs
Lorsqu’un utilisateur supprime du texte à l’intérieur d’un bloc (comme un paragraphe ou un titre), il peut arriver, en appuyant une fois de trop sur la touche Suppr ou Retour arrière, que le bloc entier soit supprimé par erreur
💾 5. Sauvegarder régulièrement
- Mettre à jour ou enregistrer en brouillon fréquemment.
- En cas de mauvaise manipulation, l’option "Historique" permet de revenir à une version précédente (icône flèche ↩️ en haut de l’éditeur).
🧱 Utiliser le bon bloc pour le bon contenu
Pour garantir une structure claire, cohérente et accessible, il est essentiel d’utiliser chaque bloc pour sa fonction prévue :
📝 Bloc Paragraphe : pour du texte courant.
✅ Bloc Liste : pour des énumérations ou des étapes — chaque point doit être un "list item" distinct, et non plusieurs phrases regroupées dans un seul item.
🔠 Blocs Titre : pour structurer les contenus avec différents niveaux (H2, H3, H4), comme dans un plan hiérarchique.
📷 Bloc Image : pour afficher une image seule, avec ou sans légende.
➡️ Il est PRIMORDIAL de vérifier la structure des blocs dans le panneau de gauche ("Plan du document").
Cela permet de s’assurer que :
- Les titres suivent une logique hiérarchique (pas de
H4avant unH2), - Les listes sont bien structurées (chaque point est un élément distinct),
- Aucun contenu n’a été placé dans un bloc inapproprié.
- Eviter des bugs inutiles
📌 Une structure bien construite facilite la lecture, la mise en page responsive et l’accessibilité.
🖼️ Paramétrer correctement les images : format et résolution
Lors de l'ajout d'une image, il est important de s'assurer que les options "Aspect Ratio" et "Resolution" sont bien définies sur "Original".
➡️ Cela permet :
- de conserver les proportions d'origine de l’image (évite les déformations),
- d’afficher l’image dans sa meilleure qualité disponible, sans compression inutile.
📌 Si une taille fixe est définie manuellement (en pixels), cela peut entraîner une mauvaise adaptation sur mobile ou un flou sur les écrans haute résolution. Il est donc recommandé de laisser les dimensions en "Auto" lorsque cela est possible.