Formation Bootstrap

Bootstrap est une boîte à outils gratuite qui permet de créer rapidement des sites web modernes, qui s'adaptent automatiquement aux ordinateurs, tablettes et mobiles. Cette formation vous apprend à l'utiliser pas à pas, de la mise en page à la personnalisation aux couleurs de votre marque. Programme personnalisable selon vos besoins.

Famille Web / Digital
Programme en PDF Télécharger

Informations pratiques

Programme de formation
Personnalisation:
Le programme peut être modifié en fonction de vos besoins et de vos objectifs sur le contenu, la durée, les modalités, les moyens pédagogiques et techniques.

Découvrir Bootstrap et l'installer Jour 1 - matin
- Le rôle d'un framework CSS : apports, limites et alternatives
- Les versions de Bootstrap et leur historique : de l'ère jQuery à aujourd'hui
- Intégrer Bootstrap : fichiers distants (CDN), téléchargement ou installation avec npm
- Le modèle de page de départ : doctype, balise viewport, fichiers CSS et JavaScript
- L'environnement de travail : Visual Studio Code, outils de développement du navigateur, documentation officielle
- Atelier : créer sa première page avec Bootstrap
Le système de grille Jour 1 - matin
- Principe : conteneurs, lignes et 12 colonnes
- Les points de rupture : classes par taille d'écran (sm, md, lg, xl, xxl)
- Largeurs automatiques, décalages et ordre des colonnes
- Imbrication de grilles et espacement des colonnes (gouttières)
- Alignements horizontaux et verticaux des colonnes
- Atelier : mettre en page une page vitrine adaptative
Textes, couleurs et classes utilitaires Jour 1 - matin
- Reboot (remise à plat des styles des navigateurs) et typographie : titres, paragraphes, listes, citations
- Couleurs, arrière-plans, bordures, ombres et coins arrondis
- Marges et espacements internes : classes m-* et p-*
- Dimensions, affichage et visibilité selon la taille de l'écran
- Alignement avec Flexbox via les classes utilitaires (d-flex, justify-content, align-items)
- Atelier : habiller des blocs sans écrire de CSS
Tableaux, images et formulaires Jour 1 - après-midi
- Les tableaux
  - Bandes, bordures, survol et tableaux défilants sur mobile
- Les images et médias
  - Images adaptatives, vignettes, figures et vidéos intégrées
- Les formulaires
  - Champs, listes déroulantes, cases à cocher, boutons radio et interrupteurs
  - Groupes de champs, libellés flottants et disposition en grille
  - Validation et messages d'erreur
Boutons, cartes et composants d'affichage Jour 1 - après-midi
- Boutons : styles, tailles, états et groupes de boutons
- Cartes (cards) : image, texte, en-tête, pied de carte et cartes en grille
- Listes groupées, alertes et badges
- Barres de progression et indicateurs de chargement (spinners)
- Icônes avec Bootstrap Icons
- Atelier : page de présentation de produits avec cartes et badges
La navigation Jour 1 - après-midi
- Barre de navigation adaptative (navbar) et menu burger
- Menus déroulants, onglets et pills
- Fil d'Ariane et pagination
- Menu latéral coulissant (offcanvas)
- Atelier : en-tête de site avec navigation adaptative
Les composants interactifs en JavaScript Jour 2 - matin
- Principe : activer un composant avec les attributs data-bs-*, sans jQuery
- Le fichier « bundle » et la bibliothèque Popper (positionnement des éléments)
- Fenêtres modales et messages éphémères (toasts)
- Accordéon et éléments dépliables (collapse)
- Carrousel d'images
- Infobulles (tooltips), popovers et Scrollspy (menu qui suit le défilement)
- Piloter un composant avec l'API JavaScript : ouverture, fermeture, événements
- Atelier : ajouter une modale, un accordéon et un carrousel à la page
Adapter l'apparence avec les variables et les thèmes Jour 2 - matin
- Les variables CSS de Bootstrap (--bs-*) : couleurs, polices, arrondis
- Le mode clair et le mode sombre (data-bs-theme)
- Surcharger le style des composants sans modifier les fichiers de Bootstrap
- Utiliser un thème prêt à l'emploi (Bootswatch)
- Atelier : décliner la page en mode sombre et aux couleurs d'une marque
Personnaliser Bootstrap avec Sass Jour 2 - après-midi
- Définition d'un préprocesseur (Sass) : variables, imbrication, import
- Installer Bootstrap avec npm et compiler ses fichiers Sass
- Modifier les variables : couleurs du thème, polices, points de rupture, espacements
- N'importer que les composants utiles pour alléger le site
- Créer ses propres classes et ses propres utilitaires
- Atelier : produire une version de Bootstrap aux couleurs d'une marque
Accessibilité, performance et bonnes pratiques Jour 2 - après-midi
- Accessibilité : contrastes, navigation au clavier, attributs ARIA et textes alternatifs
- Valider son code (validateur W3C) et auditer sa page (Lighthouse)
- Alléger les pages : images optimisées, fichiers chargés uniquement si nécessaire
- Migrer un site existant d'une ancienne version de Bootstrap : changements de classes à connaître
- Panorama des alternatives (Tailwind CSS) : quand les utiliser
Projet de synthèse Jour 2 - après-midi
- Réalisation guidée d'un site vitrine complet : accueil, présentation, contact
- Assemblage de la grille, des composants, du formulaire et des éléments interactifs
- Tests sur mobile, tablette et ordinateur avec le mode responsive du navigateur
- Questions / réponses et synthèse de la formation
Formation ajoutée le 01/01/2015, mise à jour le 19/10/2026
Pour qui ?

Prérequis
Connaissances de base du langage HTML (balises courantes, structure d'une page) et notions de CSS recommandées. Aisance avec l'environnement Windows, Mac ou Linux.

Public
Webmasters, webdesigners, intégrateurs et développeurs web souhaitant créer des sites responsives plus rapidement, sans partir d'une page blanche.
Objectifs, moyens, modalités, sanction, adaptation PSH
Objectifs :

Être capable de concevoir des sites web adaptatifs (responsive) avec Bootstrap : structurer une page avec la grille, utiliser les classes et les composants (menus, formulaires, cartes, fenêtres modales, carrousels), personnaliser l'apparence avec Sass aux couleurs d'une marque et produire un site accessible et léger.

Moyens pédagogiques :

Un PC par personne, le formateur diffuse son écran sur un vidéo-projecteur ou télévision grand écran
Un groupe de maximum 5 personnes en inter-entreprise.
En distanciel : Utilisation de Zoom ou Teams avec partage d'écran, chat, audio et vidéo en temps réel.
Exposé théorique, suivi d'une mise en pratique.

Moyens pour suivre l’exécution de l’action :
- La présence du stagiaire est vérifiée par le formateur à l'aide d'une feuille de présence signée par demi-journées
Moyens pour en apprécier les résultats :
- A la fin de la formation, le stagiaire complète une évaluation à chaud (Permettant d'évaluer la qualité de la prestation)
- Puis, il complète avec le formateur une évaluation des acquis (Permettant de déterminer les points acquis, non acquis ou en cours d'acquisition)
- Quelques mois après la formation, le donneur d'ordre complète une évaluation à froid (Permettant de s'assurer que la formation a pu être mise en pratique)
Sanction de la formation :
- A la fin de la formation le stagiaire reçoit une attestation de formation reprenant l’intitulé de la formation, les dates et le nombre d’heures réalisées.
Délai d'accès :

En intra-entreprise : En fonction de vos disponibilités et celles de nos formateurs.
En inter-entreprise : En fonction des sessions que nous avons programmé, consultable en cliquant ici

Profil formateur :
Formateurs passionnés et expérimentés intervenant en milieu professionnel en tant qu'intégrateur et développeur.

Adaptation aux personnes en situation de handicap :
Nous nous engageons à favoriser l’accessibilité du public en situation de handicap, en fonction de leurs besoins et/ou difficultés, en adaptant :
- La durée de la formation
- Le programme et son déroulement
- Les moyens pédagogiques et techniques
- Les supports pédagogiques

Ces formations adaptées sont proposées en individuel ou collectif (Pour public à besoins similaires).
Afin de trouver la meilleure solution, nous nous appuyons de partenaires, évoluant dans le domaine du handicap.
Personne à contacter / personne en charge de l'accueil et de l'accès des personnes en situation de handicap :

Lambert Christophe
03 59 25 10 15
[email protected]
Evaluation, avis ...

Evaluation : Aucune note pour cette formation entre 2024 et 2026 .
Comment financer ma formation ?

Vous ne savez pas comment financer votre formation ?. Vous êtes salarié, travailleur non salarié (TNS), commerçant, artisan, profession libérale. Suivez le guide...

Trouver mon financement

A partir de 700 €

Obtenir un devis

Tarif 2026

INTER-ENTREPRISE:
> Prochaines dates

700€ HT

INTRA-ENTREPRISE:
+ 400€ HT par pers supplémentaire.

800€ HT

Formation Bootstrap

Informations pratiques

Tarif 2026

Certification qualité

Recrutement de formateurs