Aller au contenu

Créer des sites web responsive avec Bootstrap 5

Introduction

Objectifs du cursus, prérequis et déroulé

Découvrir Bootstrap 5.x : philosophie & écosystème

Gestion des bases

Variables CSS & thème : couleurs, espacements, typographie

Conteneurs : container, container-fluid, responsive fixe/fluid

Breakpoints : grilles, classes -sm à -xxl, stratégies

Typographie : tailles, poids, alignements, utilitaires

Images & médias : img-fluid, figures, responsive Extrait Session

Exercice 01 : mise en page de base avec la grille

Exercice 02 : typographie & visuels harmonisés

Tableaux : variantes, zébrage, responsive table-responsive

Figures & légendes : figure, figcaption, bonnes pratiques

Gestion des utilitaires (partie 01)

Couleurs & états : text-*, bg-*, palette étendue

Arrière-plans : images, répétition, position, taille

Bordures : border-*, rayons, ombrages

Liens : styles, hover/focus, accessibilité

Opacité : utilitaires opacity-* & overlays

Gestion des utilitaires (partie 02)

Affichage : d-*, visibilité conditionnelle par breakpoint

Flex : axes, alignement, ordre, wrap

Overflow : rognage, scroll, cas d’usage

Flottaison : float-*, clear & layout legacy

Espacements : m*/p*, échelles et rythmes

Positionnement : position-*, top/right/bottom/left

Texte (utilitaires) : troncature, transformation, wrap

Travaux pratiques

Exercice 03 : header + hero responsive

Exercice 04 : grille multi-colonnes & cartes

Gestion des composants sans JS

Boutons & badges : variantes, tailles, icônes

Cartes : images, listes, groupes, layout

Spinners & barres de progression : feedback utilisateur

Fil d’Ariane & pagination : navigation structurée

Gestion de composants avec JS

Navbars : collapse, menus, brand & responsive

Carrousel : slides, contrôles, options et autoslide

Accordéons & collapse : contenus repliables

Dropdowns, alertes & modales : interactions clés

Tooltips & toasts : aides contextuelles et notifications

Gestion d’un formulaire

Formulaires : champs, validations, input-group, layout

Finalité du site Web — Travaux pratiques

Projet final (1) : structure & grille

Projet final (2) : composants & utilitaires

Projet final (3) : JS Bootstrap & finitions

Mon site Web

Étude de cas : démo complète (savoirpourtous.eu)

Ressources

Fichier ZIP du cours (sources, snippets, assets)

Session Précédent

Session Suivante

Images & médias : img-fluid, figures, responsive

Créer des sites web responsive avec Bootstrap 5
Images & médias : img-fluid, figures, responsive

Session Précédent

Retour à la page de formation

Session Suivante

Esprit Académique

Votre montée en compétences commence ici.

Créer votre compte et profiter d'offres de bienvenue 🎁

Only fill in if you are not human

Se souvenir de moi

Mot de passe oublié ?

ou

Continuer avec Google

Only fill in if you are not human

ou

Continuer avec Google

Mon panier

0

Fréquemment achetés ensemble :

Total

u003cstrongu003eProcéder au paiementu003c/strongu003e

0

Notifications