Bootstrap-Builder
Mobirise ist ein kostenloser Bootstrap-Builder: Sie setzen fertige Bootstrap-5-Blöcke auf eine Seite, bearbeiten sie direkt an Ort und Stelle und exportieren HTML, CSS und JavaScript. Mobirise läuft im Browser oder offline als installierte App auf einem Windows-, macOS- oder Linux-Rechner.
Aktualisiert im Oktober 2026 · vom Mobirise-Team
Wichtige Fakten für Bootstrap-Nutzer
- Art des Tools
- Ein visueller Bootstrap-5-Builder für komplette Websites: Jedes Theme basiert auf Bootstrap 5, und jeder Block ist mit dem Raster und den Klassen von Bootstrap aufgebaut.
- Systeme und Installer
- MobiriseSetup.exe (rund 105 MB) für Windows 7 und neuer; zwei .dmg-Versionen, für Apple Silicon und Intel (je rund 134 MB), ab High Sierra 10.13; ein .deb (rund 102 MB) für Ubuntu und andere Debian-basierte Linux-Systeme. Version 6.1.12; dieselbe Engine läuft auch im Browser.
- Kosten
- 0 $ für private oder kommerzielle Projekte, mit dem Basis-Theme und seinen 200+ Blöcken. Mit KIT für 149 $ pro Jahr kommen 220+ Premium-Themes und Erweiterungen hinzu, darunter der Code Editor.
- Zugriff auf den Code
- Der Code Editor ändert Markup und CSS jedes Blocks oder jeder Seite. Ohne ihn exportieren Sie die Website und nutzen einen beliebigen Editor.
- Ergebnis
- Statisches HTML, CSS und JavaScript, das die Desktop-App in jedem Plan ausgibt, auch im kostenlosen. Übertragen Sie es per FTP oder FTPES, zu GitHub Pages oder in einen Ordner, für beliebig viele Websites.
- KI (optional)
- Mobirise AI macht aus einer kurzen Beschreibung vier Designs mit Texten und Bildern, die Sie per Chat oder von Hand verfeinern. Kostenlose Konten erhalten drei KI-Generierungen pro Monat.
- Einschränkungen
- Der Editor lädt nur Projekte, die in Mobirise erstellt wurden; eine vorhandene Bootstrap-Website oder ein gekauftes Template lässt sich also nicht öffnen. Kein visuelles Bedienelement blendet Elemente pro Gerät aus oder verschiebt sie.
In seiner Besprechung von 2015 nannte Network World Mobirise „a free, simple, drag and drop mobile responsive Web site builder“ (ein kostenloser, einfacher, responsiver Website-Baukasten für Mobilgeräte mit Drag-and-Drop).
So nutzt Mobirise das Bootstrap-5-Raster
Bootstrap ordnet eine Seite in Containern, Zeilen und einem Raster aus zwölf Spalten an. Als Bootstrap-Website-Baukasten hält sich Mobirise bei jedem Block an dieses Muster, sodass ein Bootstrap-Nutzer das exportierte Markup sofort lesen kann.
Als Beispiel dient der Features-Block der Demo für ein medizinisches Verwaltungssystem, die erste der drei oben abgebildeten Websites (die anderen: ein Installateur von Solaranlagen und eine Marketingagentur).
Von außen nach innen: container-fluid spannt sich über das ganze Fenster; Blöcke mit container enden je nach Bildschirmgröße bei einer festen Breite. Eine row enthält die Spalten, und col-12 gibt einer Spalte alle zwölf Spuren, sodass auf dem Smartphone alles untereinander steht. Ab 992 Pixeln teilen col-lg-7 und col-lg-5 die Überschriftenzeile im Verhältnis sieben zu fünf, und col-lg-4 setzt die Karten in eine Reihe.
justify-content-center ist eine Flex-Utility von Bootstrap. Die mbr--Klassen, die Schriftvorgaben display-* und die eindeutige cid--Klasse des Blocks verweisen auf die Theme-Datei mbr-additional.css; dort setzt die cid-Regel hier oben und unten einen Abstand von 5rem sowie die Hintergrundfarbe, also Werte, wie sie der Parameterbereich steuert.
<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>
Quelle: der Features-Block der Demo SpecialtyM5 (medizinisches Verwaltungssystem) auf mobirise.com; innere Wrapper, Icons und Fließtext sind weggelassen. Die eigenen Klassen von Bootstrap sind bernsteinfarben markiert, die Theme-Klassen von Mobirise blau.
Eine exportierte Website behält wie die Demo das CSS- und JavaScript-Bundle von Bootstrap, die Theme-Stile und die Bilder in einem Ordner assets; diese Dateien erklärt die Anleitung zum HTML-Seitenersteller.
Mobirise und sechs weitere Bootstrap-Tools im direkten Vergleich
8B AI und Webflow sind keine Bootstrap-Tools, doch wer einen Bootstrap-Website-Baukasten sucht, zieht sie oft ebenfalls in Betracht. Zeilen, in denen Mobirise schlechter abschneidet, bleiben drin.
| Mobirise | Bootstrap Studio | Pinegrow | 8B AI | Shuffle | bootstrap.build | Webflow | |
|---|---|---|---|---|---|---|---|
| Bootstrap-Version | 5, in jedem Theme und jedem Block | 3, 4 und 5 | Werkzeuge für 3 bis 5, dazu Tailwind CSS und reines HTML | Nicht auf Bootstrap basierend | 5; derselbe Editor unterstützt auch Tailwind, Bulma und Material UI | 5 | Nicht auf Bootstrap basierend |
| Arbeitsweise | Fertige Blöcke platzieren, deren Inhalt überschreiben, Spalten, Abstände und Hintergrund pro Block festlegen | Komponenten per Drag-and-Drop einfügen, mit visuellen Einstellungen für jedes Element | Visuelle Ansicht und Code zusammen, auf gewöhnlichen HTML- und CSS-Dateien | Ein Satz hinein, ein generiertes Design heraus; keine Templates | Komponenten aus UI-Bibliotheken im Browser ziehen; ein KI-Agent kann Seiten erstellen | Keine Seiten: Sie ändern Sass-Variablen mit Live-Vorschau | Visual Designer; die Desktop-Stile bilden die Basis und werden für Tablets und Smartphones überschrieben |
| Code bearbeiten | Code Editor, eine kostenpflichtige Erweiterung; kostenlose Nutzer bearbeiten die exportierten Dateien | Integrierter Editor im Stil von VS Code für HTML, Sass und CSS, JavaScript, JSON | Vollständige Code-Bearbeitung neben der visuellen Ansicht | Sie erhalten echtes HTML und CSS; Änderungen per KI-Chat mit Pro | 500+ Bootstrap-Variablen; Feinschliff in Ihrer IDE (eine VS-Code-Erweiterung ist vorhanden) | Nur Sass-Variablen | Code-Embed-Element mit einem kostenpflichtigen Workspace- oder Site-Plan |
| Themes und Templates | Basis-Theme mit 200+ Blöcken kostenlos; 220+ Premium-Themes und Erweiterungen in kostenpflichtigen Plänen | Template-Bibliothek; beim Kauf ein oder mehrere Premium-Templates | Starter-Templates; Pinekit, eine kostenlose Bootstrap-5-Bibliothek | Keine: Jedes Design wird generiert | 3.800+ Bootstrap-UI-Komponenten; Bootstrap-5-Templates | Kostenlose Templates zum Download | 7.000+ kostenlose und Premium-Templates |
| Preis und Abrechnungsart | Start für 0 $; KIT 149 $, BASE 199 $, GROW 249 $, jeweils pro Jahr; die oberen beiden Pläne bieten zusätzlich gehostete Websites auf Ihrer Domain und mehr KI | Standard: einmalig 29 $, Upgrades für ein Jahr. Lifetime: einmalig 59 $ | 99 $ pro Jahr; auch Monats- und Einmallizenzen; kostenlose Testversion | Designen kostenlos; Pro 9 $ pro Monat, jährliche Abrechnung | Developer: 24 $ monatlich, 99 $ jährlich oder 249 $ einmalig (steigt am 16.10.2026 auf 349 $); Demo, kein kostenloser Plan | Kostenlos, ohne Konto | Kostenloser Plan auf webflow.io, mit Webflow-Badge; Basic-Site-Plan 15 $ pro Monat bei jährlicher Abrechnung |
| Ohne Internet | Bearbeiten und Vorschau funktionieren in der Desktop-App weiter; KI und Veröffentlichen brauchen eine Verbindung | Vollständig offline nutzbare Desktop-App für Windows 10+, macOS und Linux | Installierte App (Mac, Windows, Linux) auf lokalen Dateien; Offline-Nutzung wird nicht angegeben | Nur im Browser | Online-Editor | Browser-Tool | Nur im Browser, ohne installierbare App |
| Ausgabe und Veröffentlichung | Die Desktop-App exportiert statische Dateien in jedem Plan und überträgt sie per FTP oder FTPES, zu GitHub Pages oder in einen Ordner; kostenlose Subdomain auf mobirisesite.com; eigene Domains bei Mobirise-Hosting ab BASE | Statisches HTML mit lokalen Assets; Veröffentlichung per SFTP; 5 Websites auf dem eigenen Hosting (1 Jahr mit Standard, lebenslang mit Lifetime) | Normale HTML- und CSS-Dateien, die Ihnen gehören und überall gehostet werden können | Pro bringt Hosting mit SSL und den kompletten HTML-Export; der kostenlose Plan kann nicht veröffentlichen | Alle Quelldateien herunterladen oder per Git bzw. über SSH bereitstellen | Sass oder kompiliertes CSS | Gehostet bei Webflow; für den Code-Export ist ein kostenpflichtiger Workspace-Plan nötig |
| Öffnet eine vorhandene Bootstrap-Website | Nein; der Editor lädt nur Mobirise-Projekte | Ja, HTML, CSS, JavaScript und Bilder per Drag-and-Drop hineinziehen | Ja, öffnet vorhandene Bootstrap-Dateien und -Projekte | Nicht angegeben | Nicht angegeben | Nein, es gestaltet Bootstrap statt Seiten | Nicht angegeben |
| Am besten für | Kostenlose visuelle Bootstrap-5-Websites, mit Dateien, die Ihnen bleiben, und einer Offline-App | Eine einmalige Zahlung und feine Kontrolle über Bootstrap-Komponenten | Entwickler, die Code schreiben und ihn visuell sehen möchten | Ein KI-generiertes Design kostenlos ausprobieren und nur fürs Veröffentlichen zahlen | Entwickler, die Bootstrap-5-Layouts online zusammenstellen | Ein eigenes Bootstrap-Theme für selbst geschriebenen Code | Designer, die Breakpoint-Kontrolle ohne Bootstrap wollen |
Die Angaben wurden am 13. Oktober 2026 von den eigenen Websites, Preislisten und Hilfeseiten der Anbieter zusammengetragen, in US-Dollar vor der Anmeldung. Einmalpreise gelten pro Lizenz; Mobirise-Pläne werden jährlich abgerechnet. Aktionen, regionale Preise und Pläne ändern sich oft, prüfen Sie daher vor dem Kauf beim Anbieter nach.
Welchen Bootstrap-Builder wählen?
Alle diese Tools führen zu responsiven Seiten. Sie unterscheiden sich darin, wen sie ansprechen: Menschen, die fertige Blöcke anordnen, Menschen, die Klassen schreiben, und Menschen, die nur eine Theme-Datei brauchen.
- Kostenlos, visuell, die Dateien bleiben Ihnen
- Mobirise: Bootstrap-5-Blöcke, eine kostenlose Desktop-App und Code-Export in jedem Plan.
- Eine Zahlung, jede Bootstrap-Komponente
- Bootstrap Studio: eine einmalige Lizenz, Bootstrap 3 bis 5 und Website-Import.
- Vorhandenen Code bearbeiten
- Pinegrow: Es öffnet bestehende Bootstrap-Dateien und zeigt die gerenderte Seite neben dem Quelltext.
- Ein KI-Design zum Beurteilen vor dem Bezahlen
- 8B AI, sofern Ihnen Bootstrap-Markup egal ist.
- Bootstrap-5-Komponenten online
- Shuffle: eine große Komponentenbibliothek, die Sie herunterladen und in Ihrer IDE fertigstellen.
- Nur ein Theme: Farben, Schriften, Variablen
- bootstrap.build, kostenlos, liefert Sass oder CSS für Ihren eigenen Build.
- Layout Breakpoint für Breakpoint abstimmen
- Webflow, wenn Sie auf Bootstrap verzichten können.
- Ein Bootstrap-3- oder -4-Projekt am Leben halten
- Bootstrap Studio oder Pinegrow. Mobirise-Themes nutzen Bootstrap 5.
- Ein Admin-Dashboard für eine Web-App
- Ein Bootstrap-Admin-Template. Mobirise erstellt Websites, keine Anwendungsoberflächen.
Bootstrap-5-Breakpoints und was sie in einem Block ändern
Bootstrap arbeitet nach dem Mobile-First-Prinzip: Eine Klasse greift ab ihrem Breakpoint und auf jedem breiteren Bildschirm. Die Breiten stammen aus der Dokumentation von Bootstrap; das Verhalten aus den drei oben abgebildeten Demo-Websites, in denen fast jede Spalte col-12 plus einen col-lg-Wert hat.
Unter 576 px
Kein Infix. Ein einfacher Container füllt den Bildschirm, jede col-12-Spalte nimmt eine ganze Zeile ein, und der Inhalt steht in Lesereihenfolge untereinander. Das Menü verbirgt sich hinter einem Toggle-Button.
sm, ab 576 px
Der Container ist auf 540 px begrenzt. Die Demo-Blöcke bleiben, wie sie waren; ihre Formularfelder tragen col-sm-12 und behalten die volle Breite.
md, ab 768 px
Der Container erreicht 720 px. Im Buchungsformular wird die Spalte des Absenden-Buttons zu col-md-auto und schrumpft auf die Breite des Buttons selbst.
lg, ab 992 px
Die Stufe, auf die die meisten Blöcke ausgelegt sind: col-lg-7 und col-lg-5 setzen eine Überschrift neben ihren Text, col-lg-4 ordnet drei Karten in einer Reihe an, und navbar-expand-lg ersetzt den Toggle-Button durch das vollständige Menü. Container: 960 px.
xl, ab 1200 px
Die Spalten behalten ihre lg-Anordnung, während der Container auf 1140 px wächst; dadurch werden stattdessen die Textzeilen länger.
xxl, ab 1400 px
Der Container endet bei 1320 px. Blöcke auf container-fluid, wie im Beispiel, reichen bis an die Fensterränder.
Legen Sie die Spaltenanzahl eines Blocks in seinen Parametern fest und prüfen Sie sie in der Smartphone-, Tablet- und Desktop-Vorschau. Um zu ändern, wo ein Layout umschaltet, oder um etwas auf kleinen Bildschirmen mit d-none d-lg-block auszublenden, bearbeiten Sie das Markup im Code Editor; die Demo-Seiten laden das vollständige Stylesheet von Bootstrap, daher funktionieren solche Utilities. Einen visuellen Schalter dafür pro Gerät gibt es nicht.
Bootstrap-Ausgabe in Mobirise anpassen
Die meisten Anpassungen brauchen keinen Code. Die Werkzeuge, vom schnellsten bis zum technischsten:
Block-Parameter
Öffnen Sie den Parameterbereich eines Blocks, um Abstände und Hintergrund festzulegen, Elemente ein- oder auszuschalten und die Spaltenanzahl zu wählen.
Style Editor
Gestalten Sie das Theme im Style Editor um, dessen Schriftenliste in den 6.x-Versionen gewachsen ist.
Überschriftenebenen
Wählen Sie das H-Tag für jeden Titel. Tag und Größenvorgabe sind unabhängig voneinander, etwa das h4 mit display-5 im Beispiel, sodass die Gliederung korrekt bleibt.
Clone Block
Duplizieren Sie einen bereits abgestimmten Block und ändern Sie nur, was abweicht, statt seine Einstellungen neu vorzunehmen.
Code Editor (kostenpflichtig)
Bearbeiten Sie HTML und CSS pro Block oder pro Seite: Machen Sie aus col-lg-4 ein col-md-6 col-lg-4, fügen Sie eine Utility-Klasse hinzu oder schreiben Sie eigene Regeln. Enthalten in jedem kostenpflichtigen Plan.
KI für einzelne Blöcke (kostenpflichtig)
In den Premium-KI-Plänen erstellt Generate Block with AI aus einer Anfrage einen neuen Block; das Gegenstück Edit Block with AI ändert einen vorhandenen.
WebP und Fokusrahmen
Bilder werden automatisch in WebP umgewandelt, und Tastaturnutzer sehen einen deutlichen Fokusrahmen. Beides braucht keine Einstellung.
Exportieren und weitermachen
Übernehmen Sie die Dateien in Ihren eigenen Editor oder Build-Prozess und behalten Sie das Mobirise-Projekt als Master-Kopie: Bearbeitete Dateien lassen sich darin nicht wieder öffnen.
Wann Mobirise das richtige Bootstrap-Tool ist und wann nicht
Gut geeignet
- Designer und Freelancer, die Bootstrap-5-Websites wollen, ohne das Raster von Hand zu tippen
- Entwickler, die schnell ein statisches Frontend brauchen, das sie später im eigenen Editor erweitern
- Alle, die den Code besitzen und den Host selbst wählen möchten, auch ohne zu bezahlen
- Menschen, die am Laptop ohne stabiles WLAN arbeiten; die Anleitung zum Offline-Website-Builder listet auf, was weiter funktioniert
- Einsteiger, die lieber Blöcke anordnen, als Klassen zu lernen; siehe unseren Vergleich der Drag-and-Drop-Website-Builder
Besser anderswo, wenn
- Ihr Ausgangspunkt eine vorhandene Bootstrap-Website oder ein vorhandenes Template ist; Bootstrap Studio importiert sie, und Pinegrow bearbeitet die Dateien direkt
- Sie Bootstrap-3- oder -4-Projekte pflegen
- Sie jede Klasse selbst schreiben und dabei beobachten möchten; ein Code-first-Editor wie Pinegrow passt dazu besser
- Sie nur eine Theme-Datei mit Ihren Farben und Schriften brauchen; bootstrap.build erledigt das kostenlos
- Sie im visuellen Editor Steuerelemente zum Ausblenden und Verschieben pro Gerät wollen; in Webflow können Sie Stile an jedem Breakpoint überschreiben
- Sie kostenlose Code-Bearbeitung im Builder erwarten; der Code Editor erfordert einen kostenpflichtigen Plan
- Sie eine Anwendung mit Backend und Benutzerkonten entwickeln
FAQ zum Bootstrap-Builder
Was ist ein Bootstrap-Builder?
Ein Bootstrap-Builder erzeugt Seiten mit dem Raster, den Komponenten und den Klassen des Bootstrap-Frameworks, sodass Sie responsive Layouts erhalten, ohne dieses Markup zu schreiben. Mobirise und Bootstrap Studio sind visuelle Website-Baukästen; Pinegrow bearbeitet vorhandenen Code, und bootstrap.build passt nur Theme-Variablen an.
Welche Bootstrap-Version nutzt Mobirise?
Bootstrap 5. Jedes Theme basiert darauf, jeder Block nutzt sein Raster und seine Klassen, und die Demo-Seiten laden das eigene CSS- und JavaScript-Bundle von Bootstrap. Muss ein Projekt bei Bootstrap 3 oder 4 bleiben, funktionieren Bootstrap Studio und Pinegrow weiterhin mit diesen Versionen.
Gibt es einen kostenlosen Bootstrap-Builder?
Ja. Private und kommerzielle Websites lassen sich in Mobirise ohne Bezahlung erstellen, und die Desktop-App exportiert den vollständigen Code auch im kostenlosen Plan. bootstrap.build ist ebenfalls kostenlos, erzeugt aber nur eine Theme-Datei. Pinegrow bietet eine Testversion, und Bootstrap Studio ist ein kostenpflichtiger Einmalkauf.
Kann ich den Bootstrap-Code in Mobirise bearbeiten?
Ja, mit der kostenpflichtigen Erweiterung Code Editor, die HTML und CSS jedes Blocks oder jeder Seite bearbeitet. Im kostenlosen Plan exportieren Sie die Dateien und ändern sie anderswo; Mobirise kann sie nicht zurückladen, schließen Sie die Layout-Arbeit daher zuerst im Projekt ab.
Kann ich ein vorhandenes Bootstrap-Template oder eine Website importieren?
Nein. Nur in Mobirise erstellte Projekte lassen sich im Editor öffnen; ein anderswo gekauftes Template oder eine von Hand programmierte Website kann nicht geladen werden. Bauen Sie sie aus Mobirise-Blöcken nach oder wählen Sie Bootstrap Studio, das HTML, CSS und JavaScript importiert, oder Pinegrow, das vorhandene Bootstrap-Dateien bearbeitet.
Wie verhalten sich Mobirise-Blöcke auf Smartphones und Tablets?
Sie folgen den Breakpoints von Bootstrap. In den Demo-Websites laufen die meisten Spalten unter 992 Pixeln in voller Breite, der Inhalt steht also untereinander, und ab lg stehen sie nebeneinander. Jeder Block passt sich selbst an, daher gibt es keine eigene Smartphone-Version, die synchron gehalten werden müsste.
Muss ich Bootstrap kennen, um Mobirise zu nutzen?
Nein. Sie arbeiten mit Blöcken und deren Parametern, die Klassen werden für Sie geschrieben. Kenntnisse des Rasters lohnen sich im Code Editor oder in den exportierten Dateien, wo Sie Breakpoints verschieben und Utilities selbst hinzufügen können.
Kann ich die exportierte Bootstrap-Website überall hosten?
Ja. In jedem Plan veröffentlicht die Desktop-App per FTP oder FTPES, zu GitHub Pages oder in einen lokalen Ordner, und das Ergebnis sind reine statische Dateien, die jeder gewöhnliche Webhoster ausliefern kann. Bis zu 3 Online-Websites können zusätzlich kostenlos mit HTTPS auf Subdomains von mobirisesite.com liegen.
Wie unterscheidet sich Mobirise von Bootstrap Studio?
Beide haben Desktop-Apps für Windows, Mac und Linux. Mobirise ist im Einstieg kostenlos, baut aus vorgestalteten Blöcken und läuft auch im Browser, mit optionalem KI-Start. Bootstrap Studio ist eine kostenpflichtige Einmal-Lizenz mit einem Editor auf Komponentenebene, integrierter Code-Bearbeitung, Bootstrap 3 bis 5 und Website-Import.
Kann ich Mobirise als Bootstrap-Template-Builder nutzen?
Ja, auf zwei Wegen. Innerhalb eines Projekts verwendet Clone Block einen abgestimmten Block auf mehreren Seiten wieder; außerhalb wird eine exportierte Seite zum Ausgangspunkt für handgeschriebene Arbeit. Behalten Sie das Projekt, wenn Sie das Template später visuell bearbeiten möchten.
Erstellen Sie Ihre erste Bootstrap-5-Seite aus Blöcken
Installieren Sie Mobirise auf Ihrem Windows-, Mac- oder Linux-Rechner oder öffnen Sie denselben Builder in einem Browser-Tab. Exportieren Sie den Code, wann immer Sie ihn brauchen.