Aller au contenu principal

Module Bootstrap.3 – Utilitaires

Objectif​

Maîtriser les classes utilitaires Bootstrap : spacing, colors, display, flex utilities pour styler rapidement sans CSS personnalisé.

Théorie​

Spacing (Espacement)​

Système : {property}{sides}-{size}

Properties :

  • m : margin
  • p : padding

Sides :

  • t : top
  • b : bottom
  • s : start (left en LTR)
  • e : end (right en LTR)
  • x : horizontal (left + right)
  • y : vertical (top + bottom)
  • (vide) : tous les côtés

Sizes :

  • 0 : 0
  • 1 : 0.25rem (4px)
  • 2 : 0.5rem (8px)
  • 3 : 1rem (16px)
  • 4 : 1.5rem (24px)
  • 5 : 3rem (48px)
  • auto : auto (margin seulement)

Exemples :

<div class="m-3">Margin tous côtés (1rem)</div>
<div class="mt-2">Margin top (0.5rem)</div>
<div class="mb-4">Margin bottom (1.5rem)</div>
<div class="mx-auto">Margin horizontal auto (centrage)</div>
<div class="p-3">Padding tous côtés (1rem)</div>
<div class="px-4">Padding horizontal (1.5rem)</div>
<div class="py-2">Padding vertical (0.5rem)</div>

Responsive :

<div class="m-2 m-md-4 m-lg-5">Margin responsive</div>

Colors​

Couleurs de texte​

<p class="text-primary">Texte primary</p>
<p class="text-secondary">Texte secondary</p>
<p class="text-success">Texte success</p>
<p class="text-danger">Texte danger</p>
<p class="text-warning">Texte warning</p>
<p class="text-info">Texte info</p>
<p class="text-light">Texte light</p>
<p class="text-dark">Texte dark</p>
<p class="text-muted">Texte muted</p>
<p class="text-white">Texte blanc</p>

Couleurs de fond​

<div class="bg-primary">Fond primary</div>
<div class="bg-secondary">Fond secondary</div>
<div class="bg-success">Fond success</div>
<div class="bg-danger">Fond danger</div>
<div class="bg-warning">Fond warning</div>
<div class="bg-info">Fond info</div>
<div class="bg-light">Fond light</div>
<div class="bg-dark">Fond dark</div>
<div class="bg-white">Fond blanc</div>
<div class="bg-transparent">Fond transparent</div>

Opacité​

<div class="bg-primary bg-opacity-75">75% opaque</div>
<div class="text-primary text-opacity-50">50% opaque</div>

Display​

Classes display :

<div class="d-none">Caché</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex</div>
<div class="d-grid">Grid</div>
<div class="d-table">Table</div>

Responsive :

<div class="d-none d-md-block">Caché sur mobile, block sur md+</div>
<div class="d-block d-md-none">Block sur mobile, caché sur md+</div>

Flex utilities​

Direction​

<div class="d-flex flex-row">Row (défaut)</div>
<div class="d-flex flex-row-reverse">Row inversé</div>
<div class="d-flex flex-column">Column</div>
<div class="d-flex flex-column-reverse">Column inversé</div>

Justify content​

<div class="d-flex justify-content-start">Début</div>
<div class="d-flex justify-content-end">Fin</div>
<div class="d-flex justify-content-center">Centre</div>
<div class="d-flex justify-content-between">Espace entre</div>
<div class="d-flex justify-content-around">Espace autour</div>
<div class="d-flex justify-content-evenly">Espace égal</div>

Align items​

<div class="d-flex align-items-start">Haut</div>
<div class="d-flex align-items-end">Bas</div>
<div class="d-flex align-items-center">Centre</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Étirer</div>

Align self​

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

Wrap​

<div class="d-flex flex-nowrap">Pas de wrap</div>
<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap inversé</div>

Gap​

<div class="d-flex gap-1">Gap petit</div>
<div class="d-flex gap-2">Gap moyen</div>
<div class="d-flex gap-3">Gap grand</div>
<div class="d-flex gap-4">Gap très grand</div>
<div class="d-flex gap-5">Gap maximum</div>

Typography​

Tailles​

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Alignement​

<p class="text-start">Gauche</p>
<p class="text-center">Centre</p>
<p class="text-end">Droite</p>
<p class="text-justify">Justifié</p>

Transformation​

<p class="text-lowercase">MINUSCULES</p>
<p class="text-uppercase">majuscules</p>
<p class="text-capitalize">première lettre majuscule</p>

Weight​

<p class="fw-bold">Bold</p>
<p class="fw-bolder">Bolder</p>
<p class="fw-normal">Normal</p>
<p class="fw-light">Light</p>
<p class="fw-lighter">Lighter</p>

Borders​

<div class="border">Bordure</div>
<div class="border-top">Bordure top</div>
<div class="border-end">Bordure end</div>
<div class="border-bottom">Bordure bottom</div>
<div class="border-start">Bordure start</div>

<div class="border-0">Pas de bordure</div>
<div class="border border-primary">Bordure colorée</div>
<div class="rounded">Bordure arrondie</div>
<div class="rounded-circle">Cercle</div>
<div class="rounded-pill">Pill</div>

Shadows​

<div class="shadow-sm">Petite ombre</div>
<div class="shadow">Ombre normale</div>
<div class="shadow-lg">Grande ombre</div>
<div class="shadow-none">Pas d'ombre</div>

Position​

<div class="position-static">Static</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

<div class="top-0">Top 0</div>
<div class="end-0">End 0</div>
<div class="bottom-0">Bottom 0</div>
<div class="start-0">Start 0</div>

Width & Height​

<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto</div>

<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
<div class="h-auto">Height auto</div>

Exercices guidés​

Exercice 1 : Spacing​

Créez des éléments avec :

  • Margins variés (m-1 à m-5)
  • Paddings variés (p-1 à p-5)
  • Margins auto pour centrage

Exercice 2 : Colors​

Testez toutes les couleurs :

  • Texte coloré
  • Fonds colorés
  • Opacité

Exercice 3 : Display et Flex​

Créez des layouts avec :

  • Display flex
  • Justify-content variés
  • Align-items variés
  • Gap

Exercice 4 : Typography​

Testez :

  • Display classes
  • Alignement texte
  • Weight
  • Transformation

Exercice 5 : Combinaisons​

Créez des composants avec :

  • Combinaison de plusieurs utilitaires
  • Spacing + colors + flex
  • Layout complet avec utilitaires uniquement

❌ Erreurs fréquentes​

Erreur 1 : Confondre m et p​

❌ Mauvais :

<div class="m-3">Pense que c'est padding</div>

✅ Bon :

<div class="p-3">Padding</div>
<div class="m-3">Margin</div>

Pourquoi : m = margin, p = padding.

Erreur 2 : Oublier le d-flex​

❌ Mauvais :

<div class="justify-content-center">Ne fonctionne pas</div>

✅ Bon :

<div class="d-flex justify-content-center">Fonctionne</div>

Pourquoi : Flex utilities nécessitent d-flex.

Erreur 3 : Utiliser utilitaires partout​

❌ Mauvais :

<div class="m-3 p-4 bg-primary text-white d-flex justify-content-center align-items-center">
    <!-- Trop d'utilitaires, créer une classe CSS serait mieux -->
</div>

✅ Bon :

<div class="hero-section">
    <!-- Classe CSS personnalisée -->
</div>

Pourquoi : Utilitaires pour petits ajustements, classes pour styles récurrents.

Erreur 4 : Confondre text- et bg-​

❌ Mauvais :

<div class="text-primary">Pense que c'est le fond</div>

✅ Bon :

<div class="bg-primary">Fond</div>
<p class="text-primary">Texte</p>

Pourquoi : text- = couleur texte, bg- = couleur fond.

Erreur 5 : Oublier responsive​

❌ Mauvais :

<div class="d-none">Caché partout</div>

✅ Bon :

<div class="d-none d-md-block">Caché sur mobile, visible sur md+</div>

Pourquoi : Responsive = meilleure UX.

🚀 Mini-projet​

Mission : Créer une page avec utilitaires uniquement

Créez une page en utilisant principalement les utilitaires Bootstrap :

Composants :

  • Header avec spacing et colors
  • Hero section avec flex utilities
  • Cards avec spacing et shadows
  • Footer avec typography utilities

Défi :

  • Utiliser le moins de CSS personnalisé possible
  • Combiner plusieurs utilitaires
  • Créer un layout professionnel

Critères :

  • ✅ Utilitaires bien utilisés
  • ✅ Spacing cohérent
  • ✅ Colors appropriées
  • ✅ Flex utilities maîtrisées
  • ✅ Layout professionnel

Objectif : Maîtriser les utilitaires Bootstrap pour styler rapidement sans CSS personnalisé.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les utilitaires Bootstrap et créez des layouts avec les classes utilitaires.