Formation Développer des sites web responsives avec Bootstrap 5

Introduction à Bootstrap 5 et principes du Responsive Design

• —Présentation de Bootstrap 5 : Historique, avantages et versions
• —Comprendre le Responsive Web Design : Concepts clés et approche Mobile First
• —Installation et intégration de Bootstrap dans un projet web
• —Structure de base d'une page HTML avec Bootstrap (CDN vs. local)

Le système de grille Bootstrap : Fondamentaux

• —Le conteneur (container, container-fluid) et ses propriétés
• —Utilisation des lignes (row) et colonnes (col) pour la mise en page
• —Gestion de la responsivité de la grille sur différents breakpoints (sm, md, lg, xl, xxl)
• —Agencement des colonnes et utilisation des classes col-*

Personnalisation avancée de la grille et des espacements

• —Ordre des colonnes (order-*) et décalages (offset-*)
• —Alignement vertical (align-items-*) et horizontal (justify-content-*)
• —Gestion des marges (m-*) et paddings (p-*) responsives
• —Les gouttières (g-*) pour affiner les espacements entre colonnes

Les composants de navigation et barres de navigation

• —Création de barres de navigation (Navbar) : marque, liens, menus déroulants
• —Intégration de formulaires de recherche dans la Navbar
• —Navbar responsives (toggler) et gestion des breakpoints
• —Navigation simple (Navs) : onglets, pilules et listes

Boutons et groupes de boutons

• —Création de boutons stylisés : couleurs, tailles, états (active, disabled)
• —Utilisation des outlines buttons et des boutons blocs
• —Conception de groupes de boutons (Button group)
• —Intégration d'icônes avec les boutons (ex: Font Awesome)

Alertes, Badges et Progress Bars

• —Affichage d'alertes informatives, de succès, d'erreurs (Alerts)
• —Utilisation des badges pour des notifications ou compteurs
• —Représentation de l'avancement avec les barres de progression (Progress Bars)
• —Personnalisation visuelle de ces composants

Cartes (Cards) pour la présentation de contenu

• —Structure de base d'une carte : image, titre, texte, bouton
• —Cartes avec en-têtes et pieds de page
• —Regroupement de cartes (Card groups, Deck, Columns)
• —Cartes responsives et exemples d'utilisation pratiques

Modales et Carrousel d'images

• —Création de fenêtres modales (Modal) pour informations ou formulaires
• —Paramétrage des modales (taille, défilement, centrage)
• —Implémentation d'un carrousel d'images (Carousel) avec contrôles
• —Options de configuration du carrousel (animation, auto-lecture)

Formulaires et éléments d'interaction

• —Conception de formulaires stylisés : champs de texte, sélecteurs, cases à cocher
• —Validation de formulaires côté client avec les classes Bootstrap
• —Utilisation des input groups et floating labels
• —Création de formulaires responsives et accessibles

Utilisation des Utilitaires Bootstrap

• —Classes d'affichage (d-*, display) et de visibilité (visible, hidden)
• —Classes de texte (text-*, font-*) pour le stylisme typographique
• —Classes de bordures, ombres et couleurs de fond
• —Utilisation des classes responsives pour modifier le comportement des utilitaires

Intégration de JavaScript avec Bootstrap

• —Utilisation des data attributes pour activer les fonctionnalités JS
• —Travailler avec les plugins JS de Bootstrap (Collapse, Dropdown, Tooltip)
• —Événements JavaScript des composants Bootstrap
• —Exemples de personnalisation avancée des comportements

Déploiement et bonnes pratiques Bootstrap

• —Optimiser les performances des pages avec le chargement asynchrone des scripts
• —Établir une structure de fichiers claire pour faciliter la maintenance du projet
• —Utiliser les classes utilitaires Bootstrap pour un design cohérent et rapide
• —Gérer les versions de Bootstrap pour assurer la compatibilité et les mises à jour
• —Mettre en œuvre des tests de réactivité pour valider l'expérience utilisateur sur divers appareils

OPCO

Formations financées via votre opérateur de compétences

FAF

Aide à la formation pour les indépendants

France Travail

Des aides pour les demandeurs d'emploi

Employeur

Votre entreprise peut financer votre formation

FNE-Formation

Un soutien pour les entreprises en transformation

- Connaissances de base en HTML (structure des balises, attributs). - Notions élémentaires de CSS (sélecteurs, propriétés de base). - Compréhension des concepts fondamentaux du web (navigateurs, serveurs).

- Un ordinateur (PC ou Mac) avec une connexion internet stable. - Un éditeur de code (Visual Studio Code, Sublime Text, etc.) installé. - Un navigateur web moderne (Chrome, Firefox, Edge) à jour.

5 tests d'évaluation sont proposés à l'apprenant en fin de formation pour connaître son niveau sur chaque compétences visées.

Plateforme et contenus e-learning à disposition. Test de positionnement Quizz & Evaluations

Nous vous recevons lors d’un rendez-vous d’information préalable gratuit et confidentiel en visioconférence pour analyser vos besoins et co-construire votre parcours personnalisé. Chaque demande s’accompagne de la remise d’une convention ou d’un contrat précisant l’ensemble des informations relatives à la formation (Tarifs, calendrier, durée, lieu…). Ce contrat/convention sera transmis électroniquement par email.

A partir de l’accord de prise en charge par le financeur sollicité, le bénéficiaire peut démarrer sous un délai de 11 jours ouvrés. Si vous financez votre parcours de formation par vos propres moyens, alors le délai d'accès est immédiat. Vous pouvez entrer en formation tout au long de l’année.

♿️ Nous accueillons les personnes en situation de handicap. Les conditions d’accessibilité aux personnes handicapées sont inscrites sur le site imi-education.fr, rubrique Accessibilité.

Saskia Cazettes Pour tout renseignement : 07 80 91 06 14 / saskia.c@imi-executive-solutions.com

23 mars 2026

La formation alterne apports théoriques, mises en situation pratiques et échanges entre participants. Chaque concept est directement appliqué via des exercices concrets et des cas réels.

Oui, chaque participant reçoit un support de cours complet (format numérique et/ou papier) qu'il peut conserver à l'issue de la formation.

Certaines de nos formations sont éligibles au Compte Personnel de Formation (CPF). Consultez la fiche formation ou contactez-nous pour vérifier l'éligibilité.

Plusieurs dispositifs de financement existent : CPF, OPCO, plan de développement des compétences, financement individuel. Notre équipe peut vous accompagner dans vos démarches.

Oui, notre équipe reste disponible pour toute question post-formation. Vous bénéficiez également d'un accès à nos ressources en ligne pendant 6 mois après votre parcours.

Cette formation a pour objectif de vous permettre de concevoir et de développer des interfaces web responsives avec Bootstrap 5, tout en optimisant l'ergonomie et l'expérience utilisateur.

Aucun prérequis spécifique, mais une connaissance de base en développement web est préférable.

Cette formation dure 21 heures et est dispensée en ligne.

Notre organisme de formation s'engage à accueillir et accompagner les personnes en situation de handicap. Notre référente handicap, Mme Lorène Travaux est disponible pour étudier avec vous les adaptations pédagogiques, techniques ou logistiques nécessaires avant toute inscription. Contactez-nous à hello@imi-executive-solutions.com ou au 06 72 09 69 52.