Costruttore Bootstrap
Mobirise è un costruttore Bootstrap gratuito: inserisci in una pagina blocchi Bootstrap 5 già pronti, li modifichi direttamente dove si trovano ed esporti HTML, CSS e JavaScript. Funziona nel browser oppure offline, come app installata su un computer Windows, macOS o Linux.
Aggiornato a ottobre 2026 · a cura del team Mobirise
I dati essenziali per chi usa Bootstrap
- Tipo di strumento
- Un costruttore visuale Bootstrap 5 per siti web interi: ogni tema poggia su Bootstrap 5 e ogni blocco è scritto con la griglia e le classi di Bootstrap.
- Sistemi e installer
- MobiriseSetup.exe (circa 105 MB) per Windows 7 e successivi; due build .dmg, Apple Silicon e Intel (circa 134 MB ciascuna), per High Sierra 10.13 e successivi; un .deb (circa 102 MB) per Ubuntu e altre distribuzioni Linux basate su Debian. Versione 6.1.12; il motore è identico e funziona anche in un browser.
- Costo
- 0 $ per lavori personali o commerciali, con il tema base e i suoi oltre 200 blocchi. Il piano KIT, 149 $ all'anno, aggiunge oltre 220 temi premium ed estensioni, tra cui il Code Editor.
- Accesso al codice
- Il Code Editor modifica il markup e il CSS di qualsiasi blocco o pagina. Senza Code Editor, esporta il sito e usa qualsiasi editor.
- Output
- HTML, CSS e JavaScript statici, che l'app desktop produce con qualsiasi piano, anche quello gratuito. Puoi inviarli via FTP o FTPES, a GitHub Pages o in una cartella, senza limiti al numero di siti.
- AI opzionale
- Mobirise AI trasforma una breve descrizione in quattro design con testi e immagini, da rifinire in chat o a mano. Gli account gratuiti hanno a disposizione tre generazioni AI al mese.
- Limiti
- L'editor apre solo progetti creati in Mobirise, quindi un sito Bootstrap esistente o un template acquistato non si può aprire. Non esiste alcun controllo visuale per nascondere o spostare gli elementi a seconda del dispositivo.
Nella recensione del 2015, Network World ha definito Mobirise «a free, simple, drag and drop mobile responsive Web site builder» (un costruttore di siti web mobile responsive gratuito e semplice, con drag and drop).
Come Mobirise usa la griglia di Bootstrap 5
Bootstrap organizza la pagina in container, righe e una griglia a dodici colonne. Come costruttore di siti web Bootstrap, Mobirise tiene ogni blocco fedele a questo schema, perciò chi conosce Bootstrap legge subito il markup esportato.
L'esempio è il blocco delle funzionalità della demo del software gestionale medico, il primo dei tre siti mostrati sopra (gli altri sono un installatore di pannelli solari e un'agenzia di marketing).
Si parte dall'esterno. container-fluid occupa tutta la finestra; i blocchi su container si fermano a una larghezza fissa per ogni dimensione dello schermo. Una row contiene le colonne e col-12 assegna a una colonna tutte e dodici le tracce, perciò su uno smartphone tutto si impila. Da 992 pixel in su, col-lg-7 e col-lg-5 dividono la riga del titolo in sette e cinque, e col-lg-4 dispone le schede su un'unica riga.
justify-content-center è un'utility flex di Bootstrap. Le classi mbr-, i preset tipografici display-* e la classe univoca cid- del blocco rimandano al file del tema mbr-additional.css, dove la regola cid qui imposta un padding di 5rem sopra e sotto più il colore di sfondo: valori di quelli che il pannello dei parametri permette di regolare.
<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>
Fonte: il blocco delle funzionalità della demo SpecialtyM5 del software gestionale medico su mobirise.com, senza i wrapper interni, le icone e il testo del corpo. Le classi proprie di Bootstrap sono in ambra, quelle del tema Mobirise in blu.
Un sito esportato, come la demo, conserva il bundle CSS e JavaScript di Bootstrap, gli stili del tema e le immagini in una cartella assets; la guida al costruttore di pagine HTML descrive questi file.
Mobirise e altri sei strumenti Bootstrap, a confronto
8B AI e Webflow non sono strumenti Bootstrap, ma chi cerca un costruttore di siti Bootstrap spesso li valuta comunque. Le righe in cui Mobirise esce peggio restano nella tabella.
| Mobirise | Bootstrap Studio | Pinegrow | 8B AI | Shuffle | bootstrap.build | Webflow | |
|---|---|---|---|---|---|---|---|
| Versione di Bootstrap | 5, in ogni tema e blocco | 3, 4 e 5 | Strumenti per le versioni dalla 3 alla 5, più Tailwind CSS e HTML semplice | Non basato su Bootstrap | 5; lo stesso editor gestisce anche Tailwind, Bulma e Material UI | 5 | Non basato su Bootstrap |
| Come si costruisce | Inserisci blocchi già pronti, scrivi sopra il loro contenuto, imposta colonne, spaziatura e sfondo per ogni blocco | Componenti drag and drop, con controlli visuali per ogni elemento | Vista visuale e codice insieme, su normali file HTML e CSS | Scrivi una frase e ottieni un design generato; nessun template | Componenti di librerie UI da trascinare nel browser; un agente AI può costruire le pagine | Niente pagine: modifichi le variabili Sass con un'anteprima in tempo reale | Visual Designer; gli stili desktop sono la base e vengono sovrascritti per tablet e smartphone |
| Modifica del codice | Code Editor, un'estensione a pagamento; chi usa il piano gratuito modifica i file esportati | Editor integrato, simile a VS Code, per HTML, Sass e CSS, JavaScript, JSON | Modifica completa del codice accanto alla vista visuale | Ottieni l'HTML e il CSS veri; modifiche tramite la chat AI con Pro | Oltre 500 variabili di Bootstrap; rifinisci nel tuo IDE (esiste un'estensione per VS Code) | Solo variabili Sass | Elemento Code Embed con un piano Workspace o sito a pagamento |
| Temi e template | Tema base con oltre 200 blocchi gratis; oltre 220 temi premium ed estensioni nei piani a pagamento | Libreria di template; uno o più template premium con l'acquisto | Template di partenza; Pinekit, una libreria Bootstrap 5 gratuita | Nessuno: ogni design è generato | Oltre 3.800 componenti UI Bootstrap; template Bootstrap 5 | Template gratuiti da scaricare | Oltre 7.000 template gratuiti e premium |
| Prezzo e base di fatturazione | 0 $ per iniziare; KIT 149 $, BASE 199 $, GROW 249 $, ciascuno all'anno; i due piani più alti aggiungono siti ospitati sul tuo dominio e più AI | Standard: 29 $ una tantum, aggiornamenti per un anno. Lifetime: 59 $ una tantum | 99 $ all'anno; disponibili anche licenze mensili e una tantum; prova gratuita | Progettazione gratuita; Pro 9 $ al mese, con fatturazione annuale | Developer: 24 $ al mese, 99 $ all'anno o 249 $ una tantum (in aumento a 349 $ il 16/10/2026); demo, nessun piano gratuito | Gratis, senza account | Piano gratuito su webflow.io, con il badge di Webflow; piano sito Basic 15 $ al mese con fatturazione annuale |
| Senza internet | Modifica e anteprime continuano a funzionare nell'app desktop; AI e pubblicazione richiedono una connessione | App desktop completamente offline per Windows 10 e successivi, macOS e Linux | App installata (Mac, Windows, Linux) su file locali; l'uso offline non è indicato | Solo browser | Editor online | Strumento nel browser | Solo browser, senza app da installare |
| Output e pubblicazione | L'app desktop esporta file statici con ogni piano e li invia via FTP o FTPES, a GitHub Pages o in una cartella; sottodominio mobirisesite.com gratuito; domini personalizzati sull'hosting Mobirise dal piano BASE in su | HTML statico con risorse locali; pubblicazione via SFTP; 5 siti sul suo hosting (1 anno con Standard, a vita con Lifetime) | File HTML e CSS standard di tua proprietà, ospitabili ovunque | Pro aggiunge hosting con SSL ed esportazione HTML completa; il piano gratuito non può pubblicare | Download di tutti i sorgenti, oppure deploy su Git o via SSH | Sass o CSS compilato | Ospitato su Webflow; l'esportazione del codice richiede un piano workspace a pagamento |
| Apre un sito Bootstrap esistente | No; l'editor carica solo progetti Mobirise | Sì, basta trascinare HTML, CSS, JavaScript e immagini | Sì, apre file e progetti Bootstrap che hai già | Non indicato | Non indicato | No, personalizza lo stile di Bootstrap, non le pagine | Non indicato |
| Ideale per | Siti Bootstrap 5 visuali e gratuiti, con file che restano tuoi e un'app offline | Un unico pagamento e controllo preciso dei componenti Bootstrap | Sviluppatori che scrivono codice e vogliono vederlo in modo visuale | Provare gratis un design generato dall'AI, pagando solo per pubblicare | Sviluppatori che assemblano layout Bootstrap 5 online | Un tema Bootstrap personalizzato per il codice che scrivi tu | Designer che vogliono controllare i breakpoint senza Bootstrap |
Dati raccolti il 13 ottobre 2026 dai siti, dai listini e dalle pagine di assistenza di ciascun produttore, in dollari statunitensi prima di effettuare l'accesso. I prezzi una tantum valgono per singola licenza; i piani Mobirise sono fatturati annualmente. Saldi, prezzi regionali e piani cambiano spesso: ricontrolla con il produttore prima di pagare.
Quale costruttore Bootstrap scegliere
Ogni strumento qui produce pagine responsive. Si distinguono per il pubblico a cui si rivolgono: chi dispone blocchi già pronti, chi scrive le classi e chi ha bisogno solo di un file del tema.
- Gratis, visuale, con file che restano tuoi
- Mobirise: blocchi Bootstrap 5, un'app desktop senza costi ed esportazione del codice con qualsiasi piano.
- Un solo pagamento, tutti i componenti Bootstrap
- Bootstrap Studio: licenza una tantum, Bootstrap dalla 3 alla 5 e importazione di siti.
- Modificare il codice che hai già
- Pinegrow: apre file Bootstrap esistenti e mostra la pagina renderizzata accanto al sorgente.
- Un design AI da valutare prima di pagare
- 8B AI, a patto che il markup Bootstrap non sia importante per te.
- Componenti Bootstrap 5 online
- Shuffle: un'ampia libreria di componenti, da scaricare e rifinire nel tuo IDE.
- Solo un tema: colori, font, variabili
- bootstrap.build, gratuito, che fornisce Sass o CSS per la tua build.
- Layout rifinito breakpoint per breakpoint
- Webflow, se puoi fare a meno di Bootstrap.
- Mantenere in vita un progetto Bootstrap 3 o 4
- Bootstrap Studio o Pinegrow. I temi Mobirise usano Bootstrap 5.
- Una dashboard di amministrazione per una web app
- Un template admin Bootstrap. Mobirise crea siti web, non schermate di applicazioni.
I breakpoint di Bootstrap 5 e cosa cambiano in un blocco
Bootstrap segue l'approccio mobile first: una classe vale dal suo breakpoint in poi, su tutti gli schermi più larghi. Le larghezze vengono dalla documentazione di Bootstrap; il comportamento dai tre siti demo mostrati sopra, dove quasi ogni colonna è col-12 più un valore col-lg.
Sotto i 576 px
Nessun infix nelle classi. Un container semplice riempie lo schermo, ogni colonna col-12 occupa un'intera riga e il contenuto si impila nell'ordine di lettura. Il menu si nasconde dietro un pulsante toggle.
sm, da 576 px
Il container si ferma a 540 px. I blocchi della demo restano come prima; i loro campi del modulo hanno col-sm-12 e restano a tutta larghezza.
md, da 768 px
Il container arriva a 720 px. Nel modulo di prenotazione, la colonna del pulsante di invio diventa col-md-auto e si restringe alla misura del pulsante stesso.
lg, da 992 px
Il passaggio attorno a cui è progettata la maggior parte dei blocchi: col-lg-7 e col-lg-5 affiancano il titolo al suo testo, col-lg-4 dispone tre schede su una riga e navbar-expand-lg sostituisce il toggle con il menu completo. Container: 960 px.
xl, da 1.200 px
Le colonne mantengono la disposizione lg mentre il container si allarga a 1.140 px, perciò sono le righe di testo ad allungarsi.
xxl, da 1.400 px
Il container si ferma a 1.320 px. I blocchi su container-fluid, come l'esempio, si estendono fino ai bordi della finestra.
Imposta il numero di colonne di un blocco nei suoi parametri e controllalo nelle anteprime per smartphone, tablet e desktop. Per cambiare il punto in cui un layout passa da una disposizione all'altra, oppure per nascondere qualcosa sugli schermi piccoli con d-none d-lg-block, modifica il markup nel Code Editor; le pagine demo caricano il foglio di stile completo di Bootstrap, quindi utility di questo tipo funzionano. Nessun interruttore visuale lo fa per singolo dispositivo.
Personalizzare l'output Bootstrap in Mobirise
La maggior parte delle modifiche non richiede codice. I controlli, dal più rapido al più tecnico:
Parametri del blocco
Apri il pannello di un blocco per impostare spaziatura e sfondo, attivare o disattivare gli elementi e scegliere quante colonne ha.
Style Editor
Cambia lo stile del tema dallo Style Editor, il cui elenco di font è cresciuto con le versioni 6.x.
Livelli dei titoli
Scegli il tag H di ogni titolo. Tag e preset di dimensione sono indipendenti, come l'h4 con display-5 dell'esempio, così la gerarchia dei titoli resta corretta.
Clone Block
Duplica un blocco che hai già messo a punto, poi cambia solo ciò che differisce invece di rifare tutte le impostazioni.
Code Editor (a pagamento)
Modifica HTML e CSS per blocco o per pagina: trasforma col-lg-4 in col-md-6 col-lg-4, aggiungi una classe utility o scrivi regole tue. Incluso in ogni piano a pagamento.
AI per i singoli blocchi (a pagamento)
Con i piani AI premium, Generate Block with AI crea un nuovo blocco a partire da una richiesta; la sua controparte Edit Block with AI modifica un blocco esistente.
WebP ed evidenziazione del focus
Le immagini vengono convertite in WebP in automatico e chi usa la tastiera vede un'evidenziazione chiara del focus. Nessuno dei due richiede impostazioni.
Esporta e prosegui
Porta i file nel tuo editor o nel tuo processo di build e conserva il progetto Mobirise come copia principale: i file modificati non si possono riaprire al suo interno.
Quando Mobirise è lo strumento Bootstrap giusto e quando no
Adatto a
- Designer e freelance che vogliono siti Bootstrap 5 senza scrivere la griglia a mano
- Sviluppatori che hanno bisogno di un front end statico rapido da ampliare poi nel proprio editor
- Chi vuole possedere il codice e scegliere l'hosting, anche senza pagare
- Chi lavora con un portatile lontano da un Wi-Fi stabile; la guida al costruttore di siti web offline elenca ciò che continua a funzionare
- Principianti che preferiscono disporre blocchi piuttosto che imparare le classi; vedi il nostro confronto tra costruttori drag and drop
Cerca altrove se
- Parti da un sito o da un template Bootstrap che hai già; Bootstrap Studio ne importa uno e Pinegrow modifica direttamente i file
- Gestisci progetti Bootstrap 3 o 4
- Vuoi scrivere e controllare ogni classe man mano; un editor orientato al codice come Pinegrow è più adatto
- Ti serve soltanto un file del tema con i tuoi colori e font; bootstrap.build lo fa gratis
- Vuoi controlli per nascondere e spostare gli elementi per dispositivo nell'editor visuale; Webflow permette di sovrascrivere gli stili a ogni breakpoint
- Ti aspetti di modificare il codice gratis dentro il costruttore; il Code Editor richiede un piano a pagamento
- Stai creando un'applicazione con un backend e account utente
Domande frequenti sul costruttore Bootstrap
Che cos'è un costruttore Bootstrap?
Un costruttore Bootstrap produce pagine con la griglia, i componenti e le classi del framework Bootstrap, così ottieni layout responsive senza scrivere quel markup. Mobirise e Bootstrap Studio sono costruttori di siti visuali; Pinegrow modifica il codice che hai già e bootstrap.build regola soltanto le variabili del tema.
Quale versione di Bootstrap usa Mobirise?
Bootstrap 5. Ogni tema si basa su di essa, ogni blocco usa la sua griglia e le sue classi e le pagine demo caricano il bundle CSS e JavaScript di Bootstrap. Se un progetto deve restare su Bootstrap 3 o 4, Bootstrap Studio e Pinegrow funzionano ancora con quelle versioni.
Esiste un costruttore Bootstrap gratuito?
Sì. Con Mobirise si possono creare siti personali e commerciali senza pagare e la sua app desktop esporta il codice completo anche con il piano gratuito. Anche bootstrap.build è gratuito, ma produce soltanto un file del tema. Pinegrow offre una prova gratuita e Bootstrap Studio è un acquisto una tantum a pagamento.
Posso modificare il codice Bootstrap in Mobirise?
Sì, con l'estensione a pagamento Code Editor, che modifica l'HTML e il CSS di qualsiasi blocco o pagina. Con il piano gratuito, esporta e cambia i file altrove; Mobirise non può ricaricarli, quindi completa prima il lavoro sul layout nel progetto.
Posso importare un template o un sito Bootstrap esistente?
No. Nell'editor si aprono solo progetti creati in Mobirise, quindi un template acquistato altrove o un sito scritto a mano non si può caricare. Ricostruiscilo con i blocchi Mobirise oppure scegli Bootstrap Studio, che importa HTML, CSS e JavaScript, o Pinegrow, che modifica file Bootstrap esistenti.
Come si comportano i blocchi Mobirise su smartphone e tablet?
Seguono i breakpoint di Bootstrap. Nei siti demo la maggior parte delle colonne occupa tutta la larghezza sotto i 992 pixel, quindi il contenuto si impila, e si affianca da lg in su. Ogni blocco si adatta da solo, perciò non c'è una versione solo per smartphone da mantenere sincronizzata.
Devo conoscere Bootstrap per usare Mobirise?
No. Lavori con i blocchi e i loro parametri e le classi vengono scritte al posto tuo. Conoscere la griglia torna utile nel Code Editor o nei file esportati, dove puoi spostare tu i breakpoint e aggiungere le utility.
Posso ospitare ovunque il sito Bootstrap esportato?
Sì. Qualunque sia il tuo piano, l'app desktop pubblica via FTP o FTPES, su GitHub Pages o in una cartella locale, e il risultato sono semplici file statici che qualsiasi hosting web può servire. Fino a 3 siti online possono inoltre stare su sottodomini gratuiti di mobirisesite.com, con HTTPS.
In cosa Mobirise è diverso da Bootstrap Studio?
Entrambi hanno app desktop per Windows, Mac e Linux. Mobirise è gratuito per iniziare, costruisce partendo da blocchi già progettati e funziona anche in un browser, con un avvio AI opzionale. Bootstrap Studio è una licenza una tantum a pagamento, con un editor a livello di componenti, modifica del codice integrata, Bootstrap dalla 3 alla 5 e importazione di siti.
Posso usare Mobirise come costruttore di template Bootstrap?
Sì, in due modi. All'interno di un progetto, Clone Block riutilizza su più pagine un blocco già messo a punto; all'esterno, una pagina esportata diventa il punto di partenza per un lavoro scritto a mano. Conserva il progetto se in seguito vuoi modificare il template in modo visuale.
Crea la tua prima pagina Bootstrap 5 con i blocchi
Installa Mobirise sul tuo computer Windows, Mac o Linux, oppure apri lo stesso costruttore in una scheda del browser. Esporta il codice quando vuoi.