[{"data":1,"prerenderedAt":46},["ShallowReactive",2],{"course-bootstrap-5-x-creer-des-interfaces-web-responsives":3,"highlight-HTML-\u003Cdiv class=\"containe":45},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":17,"maximumParticipants":17,"duration":18,"reference":19,"trainerType":7,"updated_at":20,"created_at":21,"price":22,"organizationMode":7,"theme":23,"code":27,"tags":32,"metadata":36},"/api/courses/d47a658e-486c-4dd9-b7e8-63a69eb440d2","Bootstrap 5.x – Créer des interfaces Web responsives ","bootstrap-5-x-creer-des-interfaces-web-responsives",null,"Intégrateurs Web et développeurs front‑end souhaitant concevoir des interfaces responsives rapidement \n\nWeb designers voulant structurer des pages avec un framework éprouvé \n\nToute personne impliquée dans la création de sites ou d’applications Web souhaitant gagner en efficacité","-   Connaissances de base en HTML et CSS \n-   Notions élémentaires de développement Web (structure de page, balises HTML) \n-   Aisance avec un éditeur de code et un navigateur pour tester les interfaces ","-   Comprendre l’architecture du framework Bootstrap 5 et son intégration dans des projets Web \n-   Utiliser les classes utilitaires de Bootstrap pour des mises en page modernes et adaptatives \n-   Construire des grilles responsives, des composants interactifs et des formulaires accessibles \n-   Personnaliser les styles et thèmes Bootstrap selon des besoins graphiques spécifiques \n-   Optimiser et testeur des interfaces en conditions réelles de navigation ","--day1--\n\n## Introduction à Bootstrap 5 et mise en place \n\n-   Présentation du framework Bootstrap, positionnement et avantages \n-   Téléchargement et intégration de Bootstrap dans un projet Web \n-   Structure de base d’une page Bootstrap \n-   Classes utilitaires essentielles (typo, couleurs, espacement) \n-   Atelier guidé : création d’une page simple structurée avec Bootstrap \n\n--break--\n\n## Système de grille responsif\n\n-   Principes du système de grille Bootstrap : colonnes, lignes, conteneurs \n-   Breakpoints et adaptabilité selon les tailles d’écran \n-   Nesting et alignement des colonnes \n-   Exercices pratiques : mise en page responsives complexes \n\n--day2--\n\n## Composants et interactions \n\n-   Navigation et barres de navigation (navbar) \n-   Boutons, icônes et éléments de formulaire stylisés \n-   Composants interactifs : dropdowns, modals, tabs \n-   Introduction aux utilitaires JavaScript intégrés \n-   Travaux pratiques : intégration de composants interactifs dans une interface \n\n--break--\n\n## Personnalisation et bonnes pratiques \n\n-   Personnalisation via les variables CSS de Bootstrap \n-   Création de thèmes et surcharge de styles \n-   Optimisation de la performance (réduction du CSS, chargement conditionnel) \n-   Tests d’affichage sur divers supports (mobile, tablette, desktop) \n-   Synthèse des acquis, retours d’expérience et recommandations pour pérenniser sa pratique","Nos formations, équilibrées entre théorie (50%) et pratique (50%), offrent un apprentissage interactif grâce à des méthodes variées comme les travaux pratiques, les mises en situation et les démonstrations. Des QCM réguliers assurent le suivi des acquis.\n\nVariables suivant les formations, les moyens techniques mis en oeuvre sont :\n\nOrdinateurs Mac ou PC, connexion internet fibre, tableau blanc ou écran (pour le distanciel).\n\nEn cas de formation intra sur site externe à Le Code, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires\n\n(équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\n  \n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\n  \n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\n  \n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h\n\nouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la\n\nformation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.",0,"14.00","bootstrap","2026-04-23T09:27:09+00:00","2026-04-23T09:23:51+00:00","1500.00",{"id":24,"name":25,"slug":26},"/api/themes/abd712b8-6a6c-4c9b-b382-0aea1eac47d6","Développement Web Frontend","developpement-web-frontend",{"id":28,"label":29,"domain":30},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":31},"32 - Communication et information",[33],{"id":34,"name":35},"7732139d-6025-4fde-b145-39298ced3408","MENUFEATURED",{"desc-accroche":37,"Description":38,"icon-color":39,"icon-name":40,"code-langage":41,"code-snippet":42,"courte-description":43,"titre-accroche":44},"Maîtrisez le système de grille Flexbox, les classes utilitaires et la vaste bibliothèque de composants de Bootstrap 5 pour concevoir des interfaces Mobile-First élégantes et performantes en un temps record.","Bootstrap 5 est l'outil indispensable pour les développeurs souhaitant allier rapidité de mise en œuvre et qualité visuelle. Cette formation vous permettra de maîtriser la version 5.x, qui se distingue par l'abandon de jQuery au profit d'un JavaScript moderne et plus léger. Vous apprendrez à structurer vos pages avec un système de mise en page puissant basé sur Flexbox, à utiliser les variables CSS pour la personnalisation, et à déployer des composants complexes (modales, carrousels, barres de navigation) en quelques lignes de code. Que vous soyez en phase de prototypage rapide ou en production sur des projets d'envergure, Bootstrap offre une consistance et une robustesse garantissant une expérience utilisateur fluide sur tous les terminaux.","#7952B3","mdi:bootstrap","HTML","\u003Cdiv class=\"container py-5\">\n\t\u003Cdiv class=\"row g-4\">\n\t\t\u003Cdiv class=\"col-md-6 col-lg-4\">\n\t\t\t\u003Cdiv class=\"card border-primary h-100\">\n\t\t\t\t\u003Cdiv class=\"card-body d-flex flex-column\">\n\t\t\t\t\t\u003Ch5 class=\"card-title\">Composant Bootstrap\u003C/h5>\n\t\t\t\t\t\u003Cp class=\"card-text text-muted\">Interface responsive et moderne.\u003C/p>\n\t\t\t\t\t\u003Cbutton class=\"btn btn-primary mt-auto\">En savoir plus\u003C/button>\n\t\t\t\t\u003C/div>\n\t\t\t\u003C/div>\n\t\t\u003C/div>\n\t\u003C/div>\n\u003C/div>","Maîtrisez Bootstrap 5 pour créer rapidement des sites web modernes et responsives grâce à son système de grille intelligent et sa riche bibliothèque de composants.","Apprenez Bootstrap 5, le framework CSS le plus utilisé au monde, pour accélérer votre flux de travail et créer des sites web parfaitement adaptés à tous les écrans.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"container py-5"\u003C/span>>\u003C/span>\n\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"row g-4"\u003C/span>>\u003C/span>\n\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-md-6 col-lg-4"\u003C/span>>\u003C/span>\n\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"card border-primary h-100"\u003C/span>>\u003C/span>\n\t\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"card-body d-flex flex-column"\u003C/span>>\u003C/span>\n\t\t\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h5\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"card-title"\u003C/span>>\u003C/span>Composant Bootstrap\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h5\u003C/span>>\u003C/span>\n\t\t\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"card-text text-muted"\u003C/span>>\u003C/span>Interface responsive et moderne.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\t\t\t\t\t\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"btn btn-primary mt-auto"\u003C/span>>\u003C/span>En savoir plus\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n\t\t\t\t\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\t\t\t\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\t\t\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\t\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/code>\u003C/pre>",1781121856949]