🎨 Semaine 4 - Jour 4 : Personnalisation Bootstrap

đź“š Objectifs du jour

Apprendre à personnaliser Bootstrap : surcharger les styles, créer des composants custom, utiliser les variables CSS, et combiner Bootstrap avec votre propre CSS.

🎨 Méthode 1 : Surcharger avec CSS custom

Bootstrap standard

Card standard

Style Bootstrap par défaut.

Bootstrap personnalisé

Card custom

Style personnalisé avec CSS.

/* Créer ses propres classes */
.btn-custom {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border: none;
  color: white;
  border-radius: 25px;
}

.card-custom {
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

🎨 Méthode 2 : Variables CSS

Utiliser les variables CSS (custom properties) pour personnaliser facilement.

:root {
  --custom-primary: #6366f1;
  --custom-secondary: #ec4899;
  --custom-success: #10b981;
}

.btn-custom {
  background: var(--custom-primary);
}
Badge Custom Success Custom Secondary Custom

🌙 Méthode 3 : Dark Mode

Exemple Dark Mode

Créez votre propre thème sombre en surchargeant les couleurs Bootstrap.

Card Dark

Stylisée pour le mode sombre.

Action
Card Dark 2

Couleurs adaptées.

Action
Card Dark 3

Thème cohérent.

Action
.dark-mode {
  background: #1a1a2e;
  color: #eee;
}

.dark-mode .card {
  background: #16213e;
  color: #eee;
  border: 1px solid #0f3460;
}

🎯 Navbar personnalisée

.navbar-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

đź’ˇ Classes utilitaires custom

Spacing SM

Padding custom 1rem

Spacing MD

Padding custom 2rem

Spacing LG

Padding custom 3rem

/* Créer ses propres utilitaires */
.spacing-custom-sm { padding: 1rem; }
.spacing-custom-md { padding: 2rem; }
.spacing-custom-lg { padding: 3rem; }

🎬 Animations custom

Animation 1

Slide in avec délai.

Animation 2

Slide in avec délai.

Animation 3

Slide in avec délai.

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out;
}

đź“ť Best Practices

✅ À faire
  • CrĂ©er des classes custom (pas de !important)
  • Utiliser des variables CSS pour les couleurs
  • Garder Bootstrap.css en premier
  • Ajouter votre CSS après Bootstrap
  • Nommer clairement vos classes custom
  • Documenter vos surcharges
  • Tester le responsive
❌ À éviter
  • Modifier directement Bootstrap.css
  • Abuser de !important
  • Surcharger trop de classes Bootstrap
  • CrĂ©er des conflits de noms
  • Oublier le mobile
  • CSS inline partout
  • Pas de cohĂ©rence visuelle

🎓 Structure HTML recommandée

<head>
  <!-- 1. Bootstrap CSS en premier -->
  <link href="bootstrap.min.css" rel="stylesheet">

  <!-- 2. Vos CSS custom après -->
  <link href="custom.css" rel="stylesheet">
</head>
Froggiesplaining :


🎯 Objectifs :
âś… Surcharger les styles Bootstrap
✅ Créer des composants custom
âś… Utiliser les variables CSS
✅ Implémenter un dark mode
✅ Ajouter des animations personnalisées

📖 Points clés :
• Bootstrap d'abord, custom CSS après
• Variables CSS pour faciliter la personnalisation
• Classes custom avec noms clairs
• Éviter !important autant que possible
• Tester le responsive après personnalisation

🏋️ Exercice :
Personnalisez Bootstrap pour votre marque :
• Définir vos couleurs en variables CSS
• Créer btn-custom et card-custom
• Styliser la navbar avec votre thème
• Ajouter des animations sur les cards
• Implémenter un toggle dark mode

Froggie

GitHub - eCrea