Constructor de Bootstrap
Mobirise es un constructor de Bootstrap gratuito: colocas bloques de Bootstrap 5 ya hechos en una página, los editas donde están y exportas el HTML, el CSS y el JavaScript. Funciona en el navegador o sin conexión, como aplicación instalada en un equipo con Windows, macOS o Linux.
Actualizado en octubre de 2026 · por el equipo de Mobirise
Datos clave para usuarios de Bootstrap
- Tipo de herramienta
- Un constructor visual de Bootstrap 5 para sitios web completos: todos los temas se basan en Bootstrap 5 y cada bloque está maquetado con la cuadrícula y las clases de Bootstrap.
- Sistemas e instaladores
- MobiriseSetup.exe (unos 105 MB) para Windows 7 y posteriores; dos compilaciones .dmg, Apple Silicon e Intel (unos 134 MB cada una), para High Sierra 10.13 y versiones posteriores; un .deb (unos 102 MB) para Ubuntu y otras distribuciones Linux basadas en Debian. Versión 6.1.12; el mismo motor también funciona en un navegador.
- Precio
- 0 USD para trabajos personales o comerciales, con el tema básico y sus más de 200 bloques. Pagar KIT, 149 USD al año, añade más de 220 temas premium y extensiones, entre ellas el Code Editor.
- Acceso al código
- El Code Editor reescribe el marcado y el CSS de cualquier bloque o página. Sin él, exporta el sitio y usa cualquier editor.
- Resultado
- HTML, CSS y JavaScript estáticos, que la aplicación de escritorio genera en cualquier plan, también en el gratuito. Envíalos por FTP o FTPES, a GitHub Pages o a una carpeta, para cualquier número de sitios.
- IA opcional
- Mobirise AI convierte una descripción breve en cuatro diseños con textos e imágenes, que puedes afinar por chat o a mano. Las cuentas gratuitas tienen 3 generaciones con IA al mes.
- Límites
- El editor solo carga proyectos creados en Mobirise, así que no se puede abrir un sitio de Bootstrap existente ni una plantilla comprada. Ningún control visual oculta o mueve elementos según el dispositivo.
En su reseña de 2015, Network World describió Mobirise como “a free, simple, drag and drop mobile responsive Web site builder” (un creador de sitios web adaptable a dispositivos móviles, gratuito, sencillo y de arrastrar y soltar).
Cómo usa Mobirise la cuadrícula de Bootstrap 5
Bootstrap organiza una página en contenedores, filas y una cuadrícula de doce columnas. Como creador de sitios web con Bootstrap, Mobirise sigue ese patrón en cada bloque, así que un usuario de Bootstrap puede leer el código exportado de inmediato.
El ejemplo es el bloque de características de la demo del sistema de gestión médica, el primero de los tres sitios que se muestran arriba (los otros: un instalador de paneles solares y una agencia de marketing).
Empieza por fuera. container-fluid ocupa todo el ancho de la ventana; los bloques con container se detienen en un ancho fijo según el tamaño de pantalla. Una row contiene las columnas, y col-12 le da a una columna las doce pistas, de modo que en un teléfono todo se apila. Desde 992 píxeles, col-lg-7 y col-lg-5 reparten la fila del encabezado en siete y cinco, y col-lg-4 coloca las tarjetas en una sola línea.
justify-content-center es una utilidad flex de Bootstrap. Las clases mbr-, los preajustes tipográficos display-* y la clase cid- única del bloque apuntan al archivo del tema mbr-additional.css, donde la regla cid de este ejemplo fija un relleno de 5rem arriba y abajo, además del color de fondo: valores del tipo que controla el panel de parámetros.
<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>
Fuente: el bloque de características de la demo del sistema de gestión médica SpecialtyM5 en mobirise.com, sin los contenedores internos, los iconos ni el texto del cuerpo. Las clases propias de Bootstrap van en ámbar y las clases del tema de Mobirise, en azul.
Un sitio exportado, como la demo, conserva el paquete de CSS y JavaScript de Bootstrap, los estilos del tema y las imágenes en una carpeta assets; la guía del constructor de páginas HTML describe esos archivos.
Mobirise y otras seis herramientas de Bootstrap, lado a lado
8B AI y Webflow no son herramientas de Bootstrap, pero quien busca un creador de sitios con Bootstrap suele valorarlas también. Se mantienen las filas en las que Mobirise queda peor parado.
| Mobirise | Bootstrap Studio | Pinegrow | 8B AI | Shuffle | bootstrap.build | Webflow | |
|---|---|---|---|---|---|---|---|
| Versión de Bootstrap | 5, en todos los temas y bloques | 3, 4 y 5 | Herramientas para las versiones 3 a 5, además de Tailwind CSS y HTML simple | No se basa en Bootstrap | 5; el mismo editor maneja Tailwind, Bulma y Material UI | 5 | No se basa en Bootstrap |
| Cómo se construye | Colocas bloques prediseñados, escribes sobre su contenido y ajustas columnas, espaciado y fondo en cada bloque | Arrastras y sueltas componentes, con controles visuales para cada parte | Una vista visual y el código a la vez, sobre archivos HTML y CSS normales | Escribes una frase y obtienes un diseño generado; sin plantillas | Arrastras componentes de bibliotecas de interfaz en el navegador; un agente de IA puede crear páginas | Sin páginas: cambias variables de Sass con una vista previa en directo | Diseñador visual; los estilos de escritorio son la base y se sobrescriben para tabletas y teléfonos |
| Edición del código | Code Editor, una extensión de pago; los usuarios del plan gratuito editan los archivos exportados | Editor integrado, parecido a VS Code, para HTML, Sass y CSS, JavaScript y JSON | Edición completa del código junto a la vista visual | Obtienes el HTML y el CSS reales; los cambios se hacen por el chat de IA en Pro | Más de 500 variables de Bootstrap; terminas en tu IDE (existe una extensión de VS Code) | Solo variables de Sass | Elemento Code Embed con un plan de pago de Workspace o de sitio |
| Temas y plantillas | Tema básico con más de 200 bloques gratis; más de 220 temas premium y extensiones en los planes de pago | Biblioteca de plantillas; una o más plantillas premium con la compra | Plantillas de inicio; Pinekit, una biblioteca gratuita de Bootstrap 5 | Ninguna: cada diseño se genera | Más de 3800 componentes de interfaz de Bootstrap; plantillas de Bootstrap 5 | Plantillas gratuitas para descargar | Más de 7000 plantillas gratuitas y premium |
| Precio y periodo de facturación | 0 USD para empezar; KIT 149 USD, BASE 199 USD, GROW 249 USD, cada uno al año; los dos superiores añaden sitios alojados en tu dominio y más IA | Standard: 29 USD de pago único, con actualizaciones durante un año. Lifetime: 59 USD de pago único | 99 USD al año; también licencias mensuales y de pago único; prueba gratuita | Diseñar es gratis; Pro 9 USD al mes, con facturación anual | Developer: 24 USD al mes, 99 USD al año o 249 USD de pago único (subirá a 349 USD el 16 de octubre de 2026); demo, sin plan gratuito | Gratis, sin cuenta | Plan gratuito en webflow.io, con la insignia de Webflow; plan de sitio Basic, 15 USD al mes con facturación anual |
| Sin internet | La edición y las vistas previas siguen funcionando en la aplicación de escritorio; la IA y la publicación necesitan conexión | Aplicación de escritorio totalmente sin conexión para Windows 10 o posterior, macOS y Linux | Aplicación instalada (Mac, Windows, Linux) sobre archivos locales; no se indica si funciona sin conexión | Solo en el navegador | Editor online | Herramienta en el navegador | Solo en el navegador, sin aplicación instalable |
| Resultado y publicación | La aplicación de escritorio exporta archivos estáticos en todos los planes y los envía por FTP o FTPES, a GitHub Pages o a una carpeta; subdominio gratuito de mobirisesite.com; dominios propios en el hosting de Mobirise a partir de BASE | HTML estático con recursos locales; publicación por SFTP; 5 sitios en su propio hosting (1 año con Standard, de por vida con Lifetime) | Archivos HTML y CSS estándar que son tuyos, alojados donde quieras | Pro añade hosting con SSL y la exportación completa del HTML; el plan gratuito no puede publicar | Descargas todo el código fuente o lo despliegas en Git o por SSH | Sass o CSS compilado | Alojado en Webflow; exportar el código requiere un plan de pago de workspace |
| Abre un sitio de Bootstrap existente | No; el editor solo carga proyectos de Mobirise | Sí, arrastra HTML, CSS, JavaScript e imágenes | Sí, abre archivos de Bootstrap y proyectos que ya tengas | No se indica | No se indica | No, da estilo a Bootstrap en lugar de a páginas | No se indica |
| Ideal para | Sitios de Bootstrap 5 visuales y gratuitos, con archivos que conservas y una aplicación sin conexión | Un solo pago y un control fino de los componentes de Bootstrap | Desarrolladores que escriben código y quieren verlo de forma visual | Probar gratis un diseño generado con IA y pagar solo para publicar | Desarrolladores que montan diseños de Bootstrap 5 online | Un tema de Bootstrap personalizado para el código que escribes tú | Diseñadores que quieren control por punto de interrupción sin Bootstrap |
Datos recopilados el 13 de octubre de 2026 en el sitio, la lista de precios y las páginas de ayuda de cada proveedor, en dólares estadounidenses y antes de iniciar sesión. Los precios de pago único son por licencia; los planes de Mobirise se facturan cada año. Las ofertas, los precios regionales y los planes cambian con frecuencia, así que compruébalos con el proveedor antes de pagar.
Qué constructor de Bootstrap elegir
Todas estas herramientas acaban en páginas adaptables. Se distinguen por a quién sirven: quienes colocan bloques ya hechos, quienes escriben clases y quienes solo necesitan un archivo de tema.
- Gratis, visual y con archivos que son tuyos
- Mobirise: bloques de Bootstrap 5, una aplicación de escritorio sin coste y exportación del código en cualquier plan.
- Un solo pago, todos los componentes de Bootstrap
- Bootstrap Studio: licencia de pago único, Bootstrap 3 a 5 e importación de sitios.
- Editar código que ya tienes
- Pinegrow: abre archivos de Bootstrap existentes y muestra la página renderizada junto al código fuente.
- Un diseño con IA para valorar antes de pagar
- 8B AI, siempre que el código de Bootstrap no te importe.
- Componentes de Bootstrap 5 online
- Shuffle: una gran biblioteca de componentes, que se descarga y se termina en tu IDE.
- Solo un tema: colores, tipografías, variables
- bootstrap.build, gratis, que entrega Sass o CSS para tu propia compilación.
- Un diseño ajustado punto de interrupción por punto de interrupción
- Webflow, si puedes prescindir de Bootstrap.
- Mantener vivo un proyecto de Bootstrap 3 o 4
- Bootstrap Studio o Pinegrow. Los temas de Mobirise usan Bootstrap 5.
- Un panel de administración para una aplicación web
- Una plantilla de administración de Bootstrap. Mobirise crea sitios web, no pantallas de aplicaciones.
Los puntos de interrupción de Bootstrap 5 y qué cambian en un bloque
Bootstrap sigue el enfoque mobile first: una clase se aplica a partir de su punto de interrupción y en todas las pantallas más anchas. Los anchos proceden de la documentación de Bootstrap; el comportamiento, de los tres sitios de demostración que se muestran arriba, donde casi todas las columnas son col-12 más un valor col-lg.
Menos de 576 px
Sin infijo. Un contenedor simple ocupa toda la pantalla, cada columna col-12 ocupa una fila entera y el contenido se apila en el orden de lectura. El menú se oculta tras un botón de alternancia.
sm, desde 576 px
El contenedor se limita a 540 px. Los bloques de la demo siguen igual; sus campos de formulario llevan col-sm-12 y mantienen todo el ancho.
md, desde 768 px
El contenedor llega a 720 px. En el formulario de reservas, la columna del botón de envío pasa a col-md-auto y se estrecha hasta el tamaño del propio botón.
lg, desde 992 px
El punto para el que se diseñan casi todos los bloques: col-lg-7 y col-lg-5 colocan un encabezado junto a su texto, col-lg-4 pone tres tarjetas en una fila y navbar-expand-lg cambia el botón de alternancia por el menú completo. Contenedor: 960 px.
xl, desde 1200 px
Las columnas mantienen su disposición lg mientras el contenedor se ensancha hasta 1140 px, de modo que las líneas de texto se alargan.
xxl, desde 1400 px
El contenedor se detiene en 1320 px. Los bloques con container-fluid, como el del ejemplo, se estiran hasta los bordes de la ventana.
Define el número de columnas de un bloque en sus parámetros y compruébalo en las vistas previas de teléfono, tableta y escritorio. Para cambiar el punto en que cambia un diseño, o para ocultar algo en pantallas pequeñas con d-none d-lg-block, edita el código en el Code Editor; las páginas de demostración cargan la hoja de estilos completa de Bootstrap, así que esas utilidades funcionan. Ningún control visual hace esto según el dispositivo.
Personalizar el código de Bootstrap generado en Mobirise
La mayoría de los ajustes no requieren código. Los controles, del más rápido al más técnico:
Parámetros del bloque
Abre el panel de parámetros de un bloque para definir su espaciado y su fondo, activar o desactivar elementos y elegir cuántas columnas tiene.
Style Editor
Cambia el estilo del tema desde el Style Editor, cuya lista de tipografías creció en las versiones 6.x.
Niveles de encabezado
Elige la etiqueta H de cada título. La etiqueta y el tamaño predefinido son independientes, como el h4 con display-5 del ejemplo, así que la jerarquía de encabezados sigue siendo correcta.
Clone Block
Duplica un bloque que ya has ajustado y cambia solo lo que difiere, en lugar de repetir sus ajustes.
Code Editor (de pago)
Edita el HTML y el CSS por bloque o por página: convierte col-lg-4 en col-md-6 col-lg-4, añade una clase de utilidad o escribe tus propias reglas. Viene con todos los planes de pago.
IA para bloques sueltos (de pago)
En los planes premium con IA, Generate Block with AI crea un bloque nuevo a partir de una petición; su equivalente Edit modifica uno que ya existe.
WebP y contornos de enfoque
Las imágenes se convierten a WebP de forma automática, y quienes usan el teclado ven un contorno de enfoque claro. Ninguna de las dos cosas requiere ajustes.
Exporta y sigue trabajando
Lleva los archivos a tu propio editor o proceso de compilación y conserva el proyecto de Mobirise como copia maestra: los archivos editados no se pueden volver a abrir en él.
Cuándo Mobirise es la herramienta de Bootstrap adecuada y cuándo no
Encaja bien si
- Eres diseñador o autónomo y quieres sitios de Bootstrap 5 sin escribir la cuadrícula a mano
- Eres desarrollador y necesitas un front end estático rápido para ampliarlo después en tu propio editor
- Quieres ser dueño del código y elegir el hosting, incluso sin pagar
- Trabajas en un equipo portátil sin una conexión Wi-Fi estable; la guía del constructor de sitios web sin conexión enumera lo que sigue funcionando
- Empiezas de cero y prefieres organizar bloques a aprender clases; consulta nuestra comparativa de constructores de sitios web de arrastrar y soltar
Busca otra opción si
- Tu punto de partida es un sitio o una plantilla de Bootstrap que ya tienes; Bootstrap Studio importa uno y Pinegrow edita los archivos directamente
- Mantienes proyectos con Bootstrap 3 o 4
- Quieres escribir y ver cada clase sobre la marcha; un editor centrado en el código, como Pinegrow, encaja mejor
- Solo necesitas un archivo de tema con tus colores y tipografías; bootstrap.build lo hace gratis
- Quieres controles visuales para ocultar y mover elementos según el dispositivo en el editor visual; Webflow permite sobrescribir los estilos en cada punto de interrupción
- Esperas editar código gratis dentro del constructor; el Code Editor requiere un plan de pago
- Estás creando una aplicación con backend y cuentas de usuario
Preguntas frecuentes sobre el constructor de Bootstrap
¿Qué es un constructor de Bootstrap?
Un constructor de Bootstrap genera páginas con la cuadrícula, los componentes y las clases del framework Bootstrap, de modo que obtienes diseños adaptables sin escribir ese código. Mobirise y Bootstrap Studio son creadores visuales de sitios web; Pinegrow edita código que ya tienes y bootstrap.build solo ajusta las variables de un tema.
¿Qué versión de Bootstrap usa Mobirise?
Bootstrap 5. Todos los temas se basan en ella, cada bloque usa su cuadrícula y sus clases, y las páginas de demostración cargan el paquete oficial de CSS y JavaScript de Bootstrap. Si un proyecto debe seguir en Bootstrap 3 o 4, Bootstrap Studio y Pinegrow todavía funcionan con esas versiones.
¿Existe un constructor de Bootstrap gratuito?
Sí. Puedes crear sitios personales y comerciales en Mobirise sin pagar, y su aplicación de escritorio exporta el código completo en el plan gratuito. bootstrap.build también es gratuito, pero solo produce un archivo de tema. Pinegrow ofrece una prueba y Bootstrap Studio es una compra de pago único.
¿Puedo editar el código de Bootstrap en Mobirise?
Sí, con la extensión de pago Code Editor, que edita el HTML y el CSS de cualquier bloque o página. En el plan gratuito, exporta el sitio y cambia los archivos en otro editor; Mobirise no puede volver a cargarlos, así que termina antes el trabajo de diseño en el proyecto.
¿Puedo importar una plantilla o un sitio de Bootstrap existente?
No. En el editor solo se abren proyectos hechos en Mobirise, así que no se puede cargar una plantilla comprada en otro sitio ni un sitio escrito a mano. Vuelve a crearlo con bloques de Mobirise o elige Bootstrap Studio, que importa HTML, CSS y JavaScript, o Pinegrow, que edita archivos de Bootstrap existentes.
¿Cómo se comportan los bloques de Mobirise en teléfonos y tabletas?
Siguen los puntos de interrupción de Bootstrap. En los sitios de demostración, la mayoría de las columnas ocupan todo el ancho por debajo de 992 píxeles, de modo que el contenido se apila, y se colocan una junto a otra a partir de lg. Cada bloque se adapta por sí mismo, así que no hay una versión solo para teléfono que mantener sincronizada.
¿Necesito saber Bootstrap para usar Mobirise?
No. Trabajas con bloques y sus parámetros, y las clases se escriben por ti. Conocer la cuadrícula ayuda en el Code Editor o en los archivos exportados, donde puedes mover los puntos de interrupción y añadir utilidades tú mismo.
¿Puedo alojar en cualquier lugar el sitio de Bootstrap exportado?
Sí. Sea cual sea tu plan, la aplicación de escritorio publica por FTP o FTPES, en GitHub Pages o en una carpeta local, y el resultado son archivos estáticos simples que cualquier hosting web corriente puede servir. Hasta 3 sitios online también pueden estar en subdominios de mobirisesite.com, con HTTPS y gratis.
¿En qué se diferencia Mobirise de Bootstrap Studio?
Ambos tienen aplicaciones de escritorio para Windows, Mac y Linux. Mobirise es gratuito para empezar, construye a partir de bloques prediseñados y también funciona en un navegador, con un inicio opcional con IA. Bootstrap Studio es una licencia de pago único con un editor a nivel de componente, edición de código integrada, Bootstrap 3 a 5 e importación de sitios.
¿Puedo usar Mobirise como constructor de plantillas de Bootstrap?
Sí, de dos maneras. Dentro de un proyecto, Clone Block reutiliza en varias páginas un bloque ya ajustado; fuera de él, una página exportada se convierte en el punto de partida de un trabajo escrito a mano. Conserva el proyecto si más adelante quieres editar la plantilla de forma visual.
Crea tu primera página de Bootstrap 5 a partir de bloques
Instala Mobirise en tu equipo con Windows, Mac o Linux, o abre el mismo creador en una pestaña del navegador. Exporta el código cuando quieras.