Constructeur Bootstrap
Mobirise est un constructeur Bootstrap gratuit : vous placez des blocs Bootstrap 5 prêts à l'emploi sur une page, vous les modifiez directement à leur place et vous exportez le HTML, le CSS et le JavaScript. Il fonctionne dans un navigateur, ou hors ligne comme application installée sur un ordinateur Windows, macOS ou Linux.
Mis à jour en octobre 2026 · par l'équipe Mobirise
L'essentiel pour les utilisateurs de Bootstrap
- Type d'outil
- Un constructeur Bootstrap 5 visuel pour des sites web entiers : chaque thème repose sur Bootstrap 5, et chaque bloc est balisé avec la grille et les classes de Bootstrap.
- Systèmes et programmes d'installation
- MobiriseSetup.exe (environ 105 Mo) pour Windows 7 et versions ultérieures ; deux fichiers .dmg, Apple Silicon et Intel (environ 134 Mo chacun), pour High Sierra 10.13 et versions ultérieures ; un .deb (environ 102 Mo) pour Ubuntu et les autres distributions Linux basées sur Debian. Version 6.1.12 ; le même moteur fonctionne aussi dans un navigateur.
- Coût
- 0 $ pour un usage personnel ou commercial, avec le thème de base et ses plus de 200 blocs. L'abonnement KIT, à 149 $ par an, ajoute plus de 220 thèmes premium et extensions, dont le Code Editor.
- Accès au code
- Le Code Editor permet de modifier le balisage et le CSS de n'importe quel bloc ou page. Sans lui, exportez le site et utilisez l'éditeur de votre choix.
- Fichiers produits
- Du HTML, du CSS et du JavaScript statiques, que l'application de bureau génère avec tous les plans, y compris le plan gratuit. Envoyez-les par FTP ou FTPES, vers GitHub Pages ou dans un dossier, pour autant de sites que vous voulez.
- IA facultative
- Mobirise AI transforme une courte description en quatre designs avec textes et images, que vous affinez par chat ou à la main. Les comptes gratuits ont droit à trois générations IA par mois.
- Limites
- L'éditeur ne charge que les projets créés dans Mobirise : impossible d'ouvrir un site Bootstrap existant ni un modèle acheté ailleurs. Aucune commande visuelle ne masque ni ne déplace d'éléments selon l'appareil.
Dans son test de 2015, Network World qualifiait Mobirise de “a free, simple, drag and drop mobile responsive Web site builder” (« un créateur de site web mobile responsive gratuit, simple, en glisser-déposer »).
Comment Mobirise exploite la grille de Bootstrap 5
Bootstrap organise une page en conteneurs, en lignes et en une grille de douze colonnes. Comme créateur de site web Bootstrap, Mobirise respecte ce schéma pour chaque bloc : un utilisateur de Bootstrap lit donc le balisage exporté au premier coup d'œil.
L'exemple est le bloc de fonctionnalités de la démo du logiciel de gestion médicale, le premier des trois sites illustrés plus haut (les deux autres : un installateur de panneaux solaires et une agence de marketing).
Commencez par l'extérieur. container-fluid occupe toute la fenêtre ; les blocs sur container s'arrêtent à une largeur fixe selon la taille de l'écran. Une row contient les colonnes, et col-12 donne à une colonne les douze pistes, de sorte que sur téléphone tout s'empile. À partir de 992 pixels, col-lg-7 et col-lg-5 répartissent la ligne du titre en sept et cinq, et col-lg-4 aligne les cartes sur une seule ligne.
justify-content-center est une classe utilitaire flex de Bootstrap. Les classes mbr-, les préréglages typographiques display-* et la classe cid- propre au bloc renvoient au fichier de thème mbr-additional.css, où la règle cid fixe ici une marge intérieure de 5rem en haut et en bas ainsi que la couleur d'arrière-plan : des valeurs du genre de celles que contrôle le panneau des paramètres.
<section data-bs-version="5.1" class="features03 specialtym5 cid-vdJCkTr7dA">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card-wrapper large-radius">
<div class="row content-wrapper justify-content-center">
<div class="col-12 col-lg-7 card">
<h2 class="mbr-section-title mbr-fonts-style display-2">
Advanced Medical Management System</h2>
</div>
<div class="col-12 col-lg-5 card">
<p class="mbr-text mbr-fonts-style display-7">…</p>
<a class="btn btn-secondary-outline display-4" href="#">View More</a>
</div>
</div>
<div class="row items-wrapper justify-content-center">
<div class="item features-without-image col-12 col-lg-4">
<h4 class="item-title mbr-fonts-style display-5">Records Management</h4>
<p class="item-text mbr-fonts-style display-7">…</p>
</div>
<!-- two more cards: Smart Scheduling, Reporting Tools -->
</div>
</div>
</div>
</div>
</div>
</section>
Source : le bloc de fonctionnalités de la démo SpecialtyM5 du logiciel de gestion médicale sur mobirise.com, dont les conteneurs internes, les icônes et le texte courant ont été retirés. Les classes propres à Bootstrap sont en ambre, celles du thème Mobirise en bleu.
Un site exporté, comme la démo, conserve le bundle CSS et JavaScript de Bootstrap, les styles du thème et les images dans un dossier assets ; le guide du constructeur de pages HTML présente ces fichiers.
Mobirise et six autres outils Bootstrap, côte à côte
8B AI et Webflow ne sont pas des outils Bootstrap, mais ceux qui cherchent un créateur de sites Bootstrap les comparent souvent aussi. Les lignes où Mobirise s'en sort moins bien sont conservées.
| Mobirise | Bootstrap Studio | Pinegrow | 8B AI | Shuffle | bootstrap.build | Webflow | |
|---|---|---|---|---|---|---|---|
| Version de Bootstrap | 5, dans chaque thème et chaque bloc | 3, 4 et 5 | Outils pour Bootstrap 3 à 5, ainsi que Tailwind CSS et le HTML simple | Pas basé sur Bootstrap | 5 ; le même éditeur gère aussi Tailwind, Bulma et Material UI | 5 | Pas basé sur Bootstrap |
| Méthode de création | Placez des blocs préconçus, remplacez leur contenu en tapant dessus, réglez colonnes, espacements et arrière-plan bloc par bloc | Glisser-déposer de composants, avec des commandes visuelles pour chaque élément | Une vue visuelle et le code ensemble, sur de simples fichiers HTML et CSS | Une phrase en entrée, un design généré en sortie ; pas de modèles | Glissez des composants issus de bibliothèques d'interface dans le navigateur ; un agent IA peut créer des pages | Pas de pages : vous modifiez des variables Sass face à un aperçu en direct | Visual Designer ; les styles pour ordinateur servent de base, remplacés pour les tablettes et les téléphones |
| Modification du code | Code Editor, une extension payante ; les utilisateurs gratuits modifient les fichiers exportés | Éditeur intégré de type VS Code pour HTML, Sass et CSS, JavaScript, JSON | Édition complète du code à côté de la vue visuelle | Vous obtenez le vrai HTML et CSS ; modifications par le chat IA avec Pro | Plus de 500 variables Bootstrap ; finition dans votre IDE (une extension VS Code existe) | Variables Sass uniquement | Élément Code Embed avec un plan Workspace ou un plan de site payant |
| Thèmes et modèles | Thème de base avec plus de 200 blocs gratuit ; plus de 220 thèmes premium et extensions dans les plans payants | Bibliothèque de modèles ; un ou plusieurs modèles premium avec un achat | Modèles de départ ; Pinekit, une bibliothèque Bootstrap 5 gratuite | Aucun : chaque design est généré | Plus de 3 800 composants d'interface Bootstrap ; modèles Bootstrap 5 | Modèles gratuits à télécharger | Plus de 7 000 modèles gratuits et premium |
| Prix et base de facturation | 0 $ pour commencer ; KIT 149 $, BASE 199 $, GROW 249 $, chacun par an ; les deux plus chers ajoutent l'hébergement de sites sur votre domaine et davantage d'IA | Standard : 29 $ en une fois, mises à niveau pendant un an. Lifetime : 59 $ en une fois | 99 $ par an ; licences mensuelles et à paiement unique également ; essai gratuit | Conception gratuite ; Pro à 9 $ par mois, facturé à l'année | Developer : 24 $ par mois, 99 $ par an ou 249 $ en une fois (hausse à 349 $ le 16 octobre 2026) ; démo, pas de plan gratuit | Gratuit, sans compte | Plan gratuit sur webflow.io, avec le badge Webflow ; plan de site Basic à 15 $ par mois en facturation annuelle |
| Sans internet | La modification et les aperçus continuent de fonctionner dans l'application de bureau ; l'IA et la publication demandent une connexion | Application de bureau entièrement hors ligne pour Windows 10 et versions ultérieures, macOS et Linux | Application installée (Mac, Windows, Linux) sur des fichiers locaux ; l'usage hors ligne n'est pas précisé | Navigateur uniquement | Éditeur en ligne | Outil dans le navigateur | Navigateur uniquement, sans application à installer |
| Export et publication | L'application de bureau exporte des fichiers statiques avec tous les plans et les envoie par FTP ou FTPES, vers GitHub Pages ou un dossier ; sous-domaine mobirisesite.com gratuit ; domaines personnalisés sur l'hébergement Mobirise à partir de BASE | HTML statique avec ressources locales ; publication SFTP ; 5 sites sur son propre hébergement (1 an avec Standard, à vie avec Lifetime) | Fichiers HTML et CSS standard qui vous appartiennent, hébergés où vous voulez | Pro ajoute l'hébergement avec SSL et l'export HTML complet ; le plan gratuit ne permet pas de publier | Téléchargement de toutes les sources, ou déploiement via Git ou SSH | Sass ou CSS compilé | Hébergé sur Webflow ; l'export du code demande un plan de workspace payant |
| Ouvre un site Bootstrap existant | Non ; l'éditeur ne charge que les projets Mobirise | Oui, glissez-y du HTML, du CSS, du JavaScript et des images | Oui, ouvre les fichiers et projets Bootstrap que vous avez déjà | Non communiqué | Non communiqué | Non, il stylise Bootstrap plutôt que des pages | Non communiqué |
| Idéal pour | Des sites Bootstrap 5 visuels et gratuits, avec des fichiers que vous gardez et une application hors ligne | Un seul paiement et un contrôle fin des composants Bootstrap | Les développeurs qui écrivent du code et veulent le voir visuellement | Essayer gratuitement un design généré par IA, en ne payant que pour publier | Les développeurs qui assemblent des mises en page Bootstrap 5 en ligne | Un thème Bootstrap personnalisé pour du code que vous écrivez vous-même | Les designers qui veulent contrôler les points d'arrêt sans Bootstrap |
Informations relevées le 13 octobre 2026 sur le site, les pages de tarifs et les pages d'aide de chaque éditeur, en dollars américains avant connexion. Les prix uniques s'entendent par licence ; les plans Mobirise sont facturés à l'année. Les promotions, les prix régionaux et les plans changent souvent : vérifiez auprès de l'éditeur avant de payer.
Quel constructeur Bootstrap choisir
Tous ces outils aboutissent à des pages responsive. Ils se distinguent par le public qu'ils servent : ceux qui assemblent des blocs finis, ceux qui écrivent des classes, et ceux qui n'ont besoin que d'un fichier de thème.
- Gratuit, visuel, des fichiers qui restent à vous
- Mobirise : des blocs Bootstrap 5, une application de bureau gratuite et l'export du code avec tous les plans.
- Un seul paiement, tous les composants Bootstrap
- Bootstrap Studio : une licence à achat unique, Bootstrap 3 à 5, et l'import de sites.
- Modifier du code que vous avez déjà
- Pinegrow : il ouvre les fichiers Bootstrap existants et affiche la page rendue à côté du code source.
- Un design IA à juger avant de payer
- 8B AI, à condition que le balisage Bootstrap vous soit indifférent.
- Des composants Bootstrap 5 en ligne
- Shuffle : une grande bibliothèque de composants, à télécharger et à terminer dans votre IDE.
- Juste un thème : couleurs, polices, variables
- bootstrap.build, gratuit, qui fournit du Sass ou du CSS pour votre propre build.
- Une mise en page ajustée point d'arrêt par point d'arrêt
- Webflow, si vous pouvez vous passer de Bootstrap.
- Faire vivre un projet Bootstrap 3 ou 4
- Bootstrap Studio ou Pinegrow. Les thèmes Mobirise utilisent Bootstrap 5.
- Un tableau de bord d'administration pour une application web
- Un modèle d'administration Bootstrap. Mobirise crée des sites web, pas des écrans d'application.
Les points d'arrêt de Bootstrap 5 et ce qu'ils changent dans un bloc
Bootstrap fonctionne en mobile first : une classe prend effet à son point d'arrêt et sur tous les écrans plus larges. Les largeurs viennent de la documentation de Bootstrap ; le comportement vient des trois sites de démonstration illustrés plus haut, où presque chaque colonne est en col-12 plus une valeur col-lg.
Moins de 576 px
Pas d'infixe. Un simple container remplit l'écran, chaque colonne col-12 occupe une ligne entière et le contenu s'empile dans l'ordre de lecture. Le menu se cache derrière un bouton de menu.
sm, à partir de 576 px
Le container plafonne à 540 px. Les blocs de démo restent tels quels ; leurs champs de formulaire portent col-sm-12 et gardent toute la largeur.
md, à partir de 768 px
Le container atteint 720 px. Dans le formulaire de réservation, la colonne du bouton d'envoi devient col-md-auto et se réduit à la taille du bouton.
lg, à partir de 992 px
Le palier autour duquel la plupart des blocs sont conçus : col-lg-7 et col-lg-5 placent un titre à côté de son texte, col-lg-4 aligne trois cartes sur une ligne, et navbar-expand-lg remplace le bouton de menu par le menu complet. Container : 960 px.
xl, à partir de 1 200 px
Les colonnes gardent leur disposition lg pendant que le container s'élargit à 1 140 px : ce sont donc les lignes de texte qui s'allongent.
xxl, à partir de 1 400 px
Le container s'arrête à 1 320 px. Les blocs sur container-fluid, comme l'exemple, s'étirent jusqu'aux bords de la fenêtre.
Définissez le nombre de colonnes d'un bloc dans ses paramètres et vérifiez le résultat dans les aperçus téléphone, tablette et ordinateur. Pour changer le point où une mise en page bascule, ou pour masquer un élément sur petit écran avec d-none d-lg-block, modifiez le balisage dans le Code Editor ; les pages de démo chargent la feuille de style complète de Bootstrap, donc ces classes utilitaires fonctionnent. Aucun commutateur visuel ne le fait appareil par appareil.
Personnaliser la sortie Bootstrap dans Mobirise
La plupart des réglages ne demandent aucun code. Les commandes, de la plus rapide à la plus technique :
Paramètres du bloc
Ouvrez le panneau d'un bloc pour régler son espacement et son arrière-plan, activer ou désactiver des éléments et choisir son nombre de colonnes.
Style Editor
Restylez le thème depuis le Style Editor, dont la liste de polices s'est allongée au fil des versions 6.x.
Niveaux de titre
Choisissez la balise H de chaque titre. La balise et le préréglage de taille sont indépendants, comme le h4 avec display-5 dans l'exemple, de sorte que le plan du document reste correct.
Clone Block
Dupliquez un bloc que vous avez déjà réglé, puis ne modifiez que ce qui diffère au lieu de refaire tous ses réglages.
Code Editor (payant)
Modifiez le HTML et le CSS bloc par bloc ou page par page : transformez col-lg-4 en col-md-6 col-lg-4, ajoutez une classe utilitaire ou écrivez vos propres règles. Inclus dans tous les plans payants.
IA pour les blocs individuels (payant)
Avec les plans IA premium, Generate Block with AI crée un nouveau bloc à partir d'une demande ; son équivalent Edit modifie un bloc existant.
WebP et contours de focus
Les images sont converties automatiquement en WebP, et les utilisateurs du clavier voient un contour de focus bien net. Aucun des deux ne demande de réglage.
Exporter et poursuivre
Reprenez les fichiers dans votre propre éditeur ou processus de build, et gardez le projet Mobirise comme exemplaire de référence : les fichiers modifiés ne peuvent pas y être rouverts.
Quand Mobirise est le bon constructeur Bootstrap, et quand il ne l'est pas
Un bon choix
- Designers et freelances qui veulent des sites Bootstrap 5 sans taper la grille à la main
- Développeurs qui ont besoin d'un front-end statique rapide à compléter plus tard dans leur propre éditeur
- Tous ceux qui veulent posséder le code et choisir leur hébergeur, même sans payer
- Les personnes qui travaillent sur un portable sans Wi-Fi stable ; le guide du constructeur de site web hors ligne liste ce qui continue de fonctionner
- Les débutants qui préfèrent assembler des blocs plutôt qu'apprendre des classes ; voir notre comparatif des constructeurs de site web par glisser-déposer
Cherchez ailleurs si
- Votre point de départ est un site ou un modèle Bootstrap que vous avez déjà ; Bootstrap Studio en importe un, et Pinegrow modifie directement les fichiers
- Vous maintenez des projets Bootstrap 3 ou 4
- Vous voulez écrire et voir chaque classe au fil de l'eau ; un éditeur axé sur le code comme Pinegrow convient mieux
- Il vous faut seulement un fichier de thème avec vos couleurs et vos polices ; bootstrap.build le fait gratuitement
- Vous voulez des commandes pour masquer et déplacer des éléments par appareil dans l'éditeur visuel ; Webflow permet de remplacer les styles à chaque point d'arrêt
- Vous attendez une modification du code gratuite dans le constructeur ; le Code Editor demande un plan payant
- Vous développez une application avec un backend et des comptes utilisateurs
FAQ du constructeur Bootstrap
Qu'est-ce qu'un constructeur Bootstrap ?
Un constructeur Bootstrap produit des pages avec la grille, les composants et les classes du framework Bootstrap, ce qui donne des mises en page responsive sans écrire ce balisage. Mobirise et Bootstrap Studio sont des créateurs de site web visuels ; Pinegrow modifie du code que vous avez déjà, et bootstrap.build ne règle que les variables d'un thème.
Quelle version de Bootstrap Mobirise utilise-t-il ?
Bootstrap 5. Chaque thème repose dessus, chaque bloc utilise sa grille et ses classes, et les pages de démo chargent le bundle CSS et JavaScript propre à Bootstrap. Si un projet doit rester sur Bootstrap 3 ou 4, Bootstrap Studio et Pinegrow prennent toujours en charge ces versions.
Existe-t-il un constructeur Bootstrap gratuit ?
Oui. Vous pouvez créer des sites personnels et commerciaux dans Mobirise sans payer, et son application de bureau exporte le code complet avec le plan gratuit. bootstrap.build est gratuit lui aussi, mais ne produit qu'un fichier de thème. Pinegrow propose un essai, et Bootstrap Studio est un achat unique payant.
Puis-je modifier le code Bootstrap dans Mobirise ?
Oui, avec l'extension payante Code Editor, qui modifie le HTML et le CSS de n'importe quel bloc ou page. Avec le plan gratuit, exportez les fichiers et modifiez-les ailleurs ; Mobirise ne peut pas les recharger, alors terminez d'abord la mise en page dans le projet.
Puis-je importer un modèle ou un site Bootstrap existant ?
Non. Seuls les projets créés dans Mobirise s'ouvrent dans l'éditeur : un modèle acheté ailleurs ou un site codé à la main ne peut pas être chargé. Reconstruisez-le à partir de blocs Mobirise, ou choisissez Bootstrap Studio, qui importe HTML, CSS et JavaScript, ou Pinegrow, qui modifie des fichiers Bootstrap existants.
Comment les blocs Mobirise se comportent-ils sur téléphone et tablette ?
Ils suivent les points d'arrêt de Bootstrap. Dans les sites de démo, la plupart des colonnes occupent toute la largeur en dessous de 992 pixels, donc le contenu s'empile, puis se placent côte à côte à partir de lg. Chaque bloc s'adapte seul : il n'y a pas de version pour téléphone à maintenir en parallèle.
Dois-je connaître Bootstrap pour utiliser Mobirise ?
Non. Vous travaillez avec des blocs et leurs paramètres, et les classes sont écrites pour vous. Connaître la grille devient utile dans le Code Editor ou dans les fichiers exportés, où vous pouvez déplacer des points d'arrêt et ajouter des classes utilitaires vous-même.
Puis-je héberger le site Bootstrap exporté n'importe où ?
Oui. Quel que soit votre plan, l'application de bureau publie par FTP ou FTPES, vers GitHub Pages ou dans un dossier local, et le résultat est un ensemble de fichiers statiques que n'importe quel hébergeur web ordinaire peut servir. Jusqu'à 3 sites en ligne peuvent aussi vivre sur des sous-domaines mobirisesite.com, avec HTTPS, gratuitement.
En quoi Mobirise diffère-t-il de Bootstrap Studio ?
Tous deux proposent des applications de bureau pour Windows, Mac et Linux. Mobirise est gratuit pour commencer, construit à partir de blocs préconçus et fonctionne aussi dans un navigateur, avec un départ IA facultatif. Bootstrap Studio est une licence payante à achat unique, avec un éditeur au niveau des composants, l'édition de code intégrée, Bootstrap 3 à 5 et l'import de sites.
Puis-je utiliser Mobirise comme constructeur de modèles Bootstrap ?
Oui, de deux façons. Dans un projet, Clone Block réutilise d'une page à l'autre un bloc déjà réglé ; en dehors, une page exportée devient le point de départ d'un travail codé à la main. Gardez le projet si vous voulez modifier le modèle visuellement plus tard.
Créez votre première page Bootstrap 5 à partir de blocs
Installez Mobirise sur votre machine Windows, Mac ou Linux, ou ouvrez le même créateur dans un onglet du navigateur. Exportez le code quand vous le voulez.