# Créer des sites web responsive avec Bootstrap 5

> Formation Bootstrap 5 : grille responsive, utilitaires, composants et création d'un site web complet.

- Adresse : https://espritacademique.com/formations/creer-des-sites-web-responsive-avec-bootstrap-5/
- Thématique : Développement Web & Mobile
- Formateur : Jean-Michel R.
- Durée : 8 heures
- Nombre de leçons : 39
- Prix à l'unité : 69,00 € (accès à vie, certificat PDF de fin de formation)
- Prérequis : Pas de prérequis - ouvert à tous niveaux
- Dernière mise à jour : 10/2025
- Note des apprenants : 4,9/5 sur 6 avis

## Présentation

Créez des sites web responsive avec Bootstrap 5 : grille, utilitaires, boutons, cartes, barres de navigation, carrousels, fenêtres modales et formulaires. Vous assemblez ensuite un site complet, du header au formulaire de contact.

Cette formation Bootstrap 5 vous montre comment monter un site responsive sans écrire de CSS complexe.

Vous découvrez d'abord la logique de Bootstrap 5 et les façons de l'intégrer à un projet. Vous posez ensuite les bases : conteneurs, lignes et colonnes de la grille, points de rupture, typographie, images et vidéos fluides, couleurs du thème.

Deux parties portent sur les utilitaires, dont les classes Flexbox et d'espacement, puis des travaux pratiques vous font appliquer ces notions. Vous passez aux composants : boutons, badges et cartes d'abord, puis ceux qui utilisent JavaScript, comme les carrousels, les modales et les barres de navigation.

Après un chapitre sur les formulaires, vous réalisez un site web complet, section par section, du header au formulaire de contact.

**Public cible :** Pour les débutants motivés, les graphistes qui veulent passer à l'intégration et les développeurs qui souhaitent créer leurs interfaces plus vite.

## À l’issue de cette formation complète Bootstrap 5, vous pourrez

- **Maîtriser Bootstrap 5 :** apprenez à utiliser la philosophie du framework afin de choisir le mode d’intégration le plus adapté pour vos projets front-end.
- **Structurer vos pages avec la grille :** concevez des mises en page parfaitement responsives en maîtrisant les conteneurs, les lignes et le système de colonnes.
- **Gérer le thème et les variables CSS :** apprenez à adapter les couleurs et la typographie par défaut pour créer une identité visuelle cohérente.
- **Maîtriser la typographie et les médias :** configurez l'affichage de vos textes et rendez vos images et vidéos fluides sur tous les types d'écrans.
- **Exploiter les utilitaires Bootstrap :** utilisez les classes Flexbox et d'espacement pour prototyper vos interfaces rapidement, sans écrire de CSS complexe.
- **Construire des composants statiques :** mettez en place des boutons, des badges et des cartes élégantes pour structurer vos contenus proprement.
- **Animer vos interfaces :** paramétrez des carrousels, des modales et des barres de navigation interactives pour améliorer l'expérience utilisateur.
- **Réaliser un site complet :** assemblez toutes les sections d'un site moderne, du header au formulaire de contact, pour livrer un projet prêt pour la production.

## Programme

### 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 gratuit)
- 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)

## Voir aussi

- [Toutes les formations Bootstrap](https://espritacademique.com/catalogue-de-formations/dev/bootstrap/)
- [Parcours Développeur front-end](https://espritacademique.com/parcours-metiers/front-end/) : 9 formations, 299,00 €