Personnaliser Bootstrap — Cours Bootstrap 5

Personnaliser Bootstrap — Cours Bootstrap 5 | Med Learning

Leçon 1

Niveau 1 : ton propre CSS

Ton fichier style.css, relié après Bootstrap, peut surcharger n'importe quel style.

css/style.css

css

.hero {
  background: linear-gradient(135deg, #3d2466, #7952b3);
  color: white;
}
.card-offre {
  border-radius: 1rem;
  transition: transform 0.2s ease-out;
}
.card-offre:hover {
  transform: translateY(-6px);
}

Leçon 2

Niveau 2 : les variables CSS de Bootstrap

Bootstrap 5.3 expose ses réglages sous forme de variables CSS préfixées par --bs-. Les redéfinir change l'apparence de tout le site.

Adapter Bootstrap à une charte graphique

css

:root {
  --bs-primary: #7952b3;
  --bs-primary-rgb: 121, 82, 179;
  --bs-body-font-family: "Poppins", system-ui, sans-serif;
  --bs-body-color: #1d2433;
  --bs-border-radius: 0.75rem;
  --bs-link-color: #5b3a99;
  --bs-link-hover-color: #3d2466;
}

/* les boutons ont leurs propres variables */
.btn-primary {
  --bs-btn-bg: #7952b3;
  --bs-btn-border-color: #7952b3;
  --bs-btn-hover-bg: #5b3a99;
  --bs-btn-hover-border-color: #5b3a99;
}

Leçon 3

Le mode sombre

Activer le thème sombre

html

<html lang="fr" data-bs-theme="dark">          <!-- toute la page -->
<div class="card" data-bs-theme="light">…</div> <!-- ou un seul composant -->

Bootstrap 5.3 fournit les deux thèmes. Avec quelques lignes de JavaScript, un bouton peut changer data-bs-theme sur la balise <html>.

Leçon 4

Niveau 3 : Sass

Leçon 5

Bootstrap ou pas Bootstrap ?

Situation	Conseil
prototype, back-office, tableau de bord, projet scolaire rapide	Bootstrap : rapide et fiable
site vitrine avec une maquette très originale	CSS sur mesure (Flexbox, Grid), éventuellement seulement la grille de Bootstrap
projet React ou Vue	React-Bootstrap, ou un framework utilitaire comme Tailwind CSS
tu débutes	Bootstrap après le CSS, jamais à la place

Travaux pratiques

Le bouton de thème

Exercices

Exercice 8.1

Choisis la bonne réponse

1Ton CSS doit être chargé…
2Les variables CSS de Bootstrap commencent par…
3Pour passer toute la page en thème sombre :
4Avec Sass, les variables se définissent…
5Pour changer la couleur de bg-primary, on redéfinit…
6Un débutant devrait apprendre…

0/6 répondues

Exercice 8.2

Ta charte graphique

L'essentiel du chapitre

À retenir

Niveau 1 : ton style.css après Bootstrap, tes propres classes, pas de !important.
Niveau 2 : variables --bs-* dans :root (couleur + version -rgb), variables des composants --bs-btn-*.
Mode sombre : data-bs-theme="dark" sur <html> ou sur un composant.
Niveau 3 : Sass ($primary… avant @import "bootstrap"), pour tout générer et alléger.
Bootstrap s'apprend après le CSS.

scss/style.scss

txt

// 1. Tes réglages AVANT Bootstrap
$primary: #7952b3;
$font-family-sans-serif: "Poppins", system-ui, sans-serif;
$border-radius: .75rem;
$enable-shadows: true;

// 2. Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";