Construtor de Bootstrap
O Mobirise é um construtor de Bootstrap gratuito: você coloca blocos prontos do Bootstrap 5 na página, edita cada um no próprio lugar e exporta o HTML, o CSS e o JavaScript. Ele roda no navegador ou offline, como aplicativo instalado em um computador com Windows, macOS ou Linux.
Atualizado em outubro de 2026 · pela equipe do Mobirise
Fatos principais para quem usa Bootstrap
- Tipo de ferramenta
- Um construtor visual de Bootstrap 5 para sites completos: todos os temas usam o Bootstrap 5, e cada bloco é marcado com a grade e as classes do Bootstrap.
- Sistemas e instaladores
- MobiriseSetup.exe (cerca de 105 MB) para Windows 7 ou posterior; duas versões .dmg, Apple Silicon e Intel (cerca de 134 MB cada), para o High Sierra 10.13 ou posterior; um .deb (cerca de 102 MB) para Ubuntu e outros Linux baseados em Debian. Versão 6.1.12; o mesmo motor também funciona no navegador.
- Custo
- US$ 0 para trabalhos pessoais ou comerciais, com o tema básico e seus mais de 200 blocos. Quem assina o KIT, por US$ 149 por ano, ganha mais de 220 temas premium e extensões, entre elas o Code Editor.
- Acesso ao código
- O Code Editor reescreve a marcação e o CSS de qualquer bloco ou página. Sem ele, exporte o site e use o editor que preferir.
- Saída
- HTML, CSS e JavaScript estáticos, que o aplicativo para desktop gera em qualquer plano, inclusive no gratuito. Envie por FTP ou FTPES, para o GitHub Pages ou para uma pasta, em qualquer quantidade de sites.
- IA opcional
- O Mobirise AI transforma uma descrição curta em quatro designs com textos e imagens, que você refina por chat ou manualmente. Contas gratuitas têm três gerações com IA por mês.
- Limites
- O editor só abre projetos criados no Mobirise, então não é possível abrir um site Bootstrap já existente nem um modelo comprado. Não há controle visual para ocultar ou mover elementos por dispositivo.
Em sua análise de 2015, a Network World chamou o Mobirise de “a free, simple, drag and drop mobile responsive Web site builder” (“um criador de sites gratuito, simples, de arrastar e soltar e responsivo para celular”).
Como o Mobirise usa a grade do Bootstrap 5
O Bootstrap organiza a página em contêineres, linhas e uma grade de doze colunas. Como construtor de Bootstrap, o Mobirise mantém todos os blocos nesse padrão, e quem já conhece o Bootstrap lê a marcação exportada de imediato.
O exemplo é o bloco de recursos da demonstração do sistema de gestão médica, o primeiro dos três sites mostrados acima (os outros: uma empresa de instalação de painéis solares e uma agência de marketing).
Comece pelo lado de fora. container-fluid ocupa toda a janela; os blocos em container param numa largura fixa para cada tamanho de tela. Uma row contém as colunas, e col-12 dá a uma coluna as doze faixas, de modo que no celular tudo se empilha. A partir de 992 pixels, col-lg-7 e col-lg-5 dividem a linha do título em sete e cinco, e col-lg-4 coloca os cartões em uma única linha.
justify-content-center é uma classe utilitária de flex do Bootstrap. As classes mbr-, as predefinições de texto display-* e a classe cid-, exclusiva do bloco, apontam para o arquivo de tema mbr-additional.css, em que a regra cid define aqui um padding de 5rem acima e abaixo, além da cor de fundo: valores do tipo que o painel de parâmetros controla.
<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: o bloco de recursos da demonstração do sistema de gestão médica SpecialtyM5 em mobirise.com, sem os wrappers internos, os ícones e o texto corrido. As classes próprias do Bootstrap estão em âmbar, as classes de tema do Mobirise em azul.
Um site exportado, como a demonstração, mantém o pacote de CSS e JavaScript do Bootstrap, os estilos do tema e as imagens em uma pasta assets; o guia do construtor de páginas HTML trata desses arquivos.
O Mobirise e outras seis ferramentas Bootstrap, lado a lado
O 8B AI e o Webflow não são ferramentas Bootstrap, mas quem procura um criador de sites com Bootstrap muitas vezes os avalia também. As linhas em que o Mobirise leva a pior foram mantidas.
| Mobirise | Bootstrap Studio | Pinegrow | 8B AI | Shuffle | bootstrap.build | Webflow | |
|---|---|---|---|---|---|---|---|
| Versão do Bootstrap | 5, em todos os temas e blocos | 3, 4 e 5 | Ferramentas para as versões 3 a 5, além de Tailwind CSS e HTML puro | Não é baseado em Bootstrap | 5; o mesmo editor também trabalha com Tailwind, Bulma e Material UI | 5 | Não é baseado em Bootstrap |
| Como você cria | Coloque blocos prontos, digite sobre o conteúdo deles e defina colunas, espaçamento e fundo em cada bloco | Arraste e solte componentes, com controles visuais para cada parte | Visualização gráfica e código juntos, em arquivos HTML e CSS comuns | Entra uma frase, sai um design gerado; sem modelos | Arraste componentes de bibliotecas de UI no navegador; um agente de IA pode montar páginas | Sem páginas: você altera variáveis Sass com uma prévia ao vivo | Visual Designer; os estilos de desktop são a base e são substituídos para tablets e celulares |
| Edição de código | Code Editor, uma extensão paga; usuários gratuitos editam os arquivos exportados | Editor integrado, semelhante ao VS Code, para HTML, Sass e CSS, JavaScript, JSON | Edição de código completa ao lado da visualização gráfica | Você recebe o HTML e o CSS reais; alterações pelo chat de IA no plano Pro | Mais de 500 variáveis do Bootstrap; termine no seu IDE (existe uma extensão para o VS Code) | Somente variáveis Sass | Elemento Code Embed, com um plano pago de Workspace ou de site |
| Temas e modelos | Tema básico com mais de 200 blocos grátis; mais de 220 temas premium e extensões nos planos pagos | Biblioteca de modelos; um ou mais modelos premium com a compra | Modelos iniciais; Pinekit, uma biblioteca gratuita de Bootstrap 5 | Nenhum: todo design é gerado | Mais de 3.800 componentes de UI do Bootstrap; modelos de Bootstrap 5 | Modelos gratuitos para baixar | Mais de 7.000 modelos gratuitos e premium |
| Preço e base de cobrança | US$ 0 para começar; KIT US$ 149, BASE US$ 199, GROW US$ 249, cada um por ano; os dois mais altos incluem sites hospedados no seu domínio e mais IA | Standard: US$ 29 uma única vez, com atualizações por um ano. Lifetime: US$ 59 uma única vez | US$ 99 por ano; também há licenças mensais e únicas; teste grátis | Criar designs é grátis; Pro: US$ 9 por mês, cobrados anualmente | Developer: US$ 24 por mês, US$ 99 por ano ou US$ 249 uma única vez (passa a US$ 349 em 16 de outubro de 2026); demonstração, sem plano gratuito | Grátis, sem conta | Plano gratuito em webflow.io, com o selo do Webflow; plano de site Basic a US$ 15 por mês no pagamento anual |
| Sem internet | A edição e as prévias continuam funcionando no aplicativo para desktop; a IA e a publicação precisam de conexão | Aplicativo para desktop totalmente offline, para Windows 10 ou posterior, macOS e Linux | Aplicativo instalado (Mac, Windows, Linux) sobre arquivos locais; o uso offline não é informado | Somente no navegador | Editor online | Ferramenta no navegador | Somente no navegador, sem aplicativo instalável |
| Saída e publicação | O aplicativo para desktop exporta arquivos estáticos em todos os planos e os envia por FTP ou FTPES, para o GitHub Pages ou para uma pasta; subdomínio gratuito em mobirisesite.com; domínios próprios na hospedagem do Mobirise a partir do plano BASE | HTML estático com recursos locais; publicação por SFTP; 5 sites na hospedagem própria (1 ano com o Standard, vitalício com o Lifetime) | Arquivos HTML e CSS padrão que são seus, hospedados onde você quiser | O Pro inclui hospedagem com SSL e a exportação completa do HTML; o plano gratuito não publica | Baixe todos os arquivos-fonte ou faça o deploy no Git ou por SSH | Sass ou CSS compilado | Hospedado no Webflow; exportar o código exige um plano pago de workspace |
| Abre um site Bootstrap existente | Não; o editor só carrega projetos do Mobirise | Sim, arraste HTML, CSS, JavaScript e imagens | Sim, abre arquivos e projetos Bootstrap que você já tem | Não divulgado | Não divulgado | Não, ele estiliza o Bootstrap em vez de páginas | Não divulgado |
| Ideal para | Sites visuais e gratuitos em Bootstrap 5, com arquivos que ficam com você e um aplicativo offline | Um pagamento único e controle refinado dos componentes do Bootstrap | Desenvolvedores que escrevem código e querem vê-lo de forma visual | Experimentar de graça um design gerado por IA, pagando só para publicar | Desenvolvedores que montam layouts em Bootstrap 5 online | Um tema Bootstrap personalizado para o código que você mesmo escreve | Designers que querem controle por breakpoint sem Bootstrap |
Fatos reunidos em 13 de outubro de 2026 nos sites, tabelas de preços e páginas de ajuda de cada fornecedor, em dólares americanos, antes de entrar na conta. Os preços únicos são por licença; os planos do Mobirise são cobrados anualmente. Promoções, preços regionais e planos mudam com frequência, então confirme com o fornecedor antes de pagar.
Qual construtor de Bootstrap escolher
Todas as ferramentas aqui resultam em páginas responsivas. O que as separa é quem elas atendem: quem organiza blocos prontos, quem escreve classes e quem precisa apenas de um arquivo de tema.
- Grátis, visual, com arquivos que continuam seus
- Mobirise: blocos Bootstrap 5, um aplicativo para desktop sem custo e exportação do código em qualquer plano.
- Um pagamento, todos os componentes do Bootstrap
- Bootstrap Studio: licença única, Bootstrap 3 a 5 e importação de sites.
- Editar um código que você já tem
- Pinegrow: abre arquivos Bootstrap existentes e mostra a página renderizada ao lado do código-fonte.
- Um design de IA para avaliar antes de pagar
- 8B AI, desde que a marcação Bootstrap não importe para você.
- Componentes do Bootstrap 5 online
- Shuffle: uma grande biblioteca de componentes, que você baixa e finaliza no seu IDE.
- Só um tema: cores, fontes, variáveis
- bootstrap.build, gratuito, entrega Sass ou CSS para o seu próprio build.
- Layout ajustado breakpoint por breakpoint
- Webflow, se você puder dispensar o Bootstrap.
- Manter vivo um projeto em Bootstrap 3 ou 4
- Bootstrap Studio ou Pinegrow. Os temas do Mobirise usam o Bootstrap 5.
- Um painel administrativo para um aplicativo web
- Um modelo de painel administrativo em Bootstrap. O Mobirise faz sites, não telas de aplicativos.
Breakpoints do Bootstrap 5 e o que eles mudam em um bloco
O Bootstrap trabalha com mobile first: uma classe passa a valer em seu breakpoint e em todas as telas maiores. As larguras vêm da documentação do Bootstrap; o comportamento vem dos três sites de demonstração mostrados acima, onde quase toda coluna é col-12 mais um valor col-lg.
Abaixo de 576 px
Sem infixo. Um container simples ocupa a tela, cada coluna col-12 toma uma linha inteira e o conteúdo se empilha na ordem de leitura. O menu fica escondido atrás de um botão de alternância.
sm, a partir de 576 px
O container para em 540 px. Os blocos de demonstração continuam como estavam; os campos de formulário têm col-sm-12 e seguem com largura total.
md, a partir de 768 px
O container chega a 720 px. No formulário de reserva, a coluna do botão de envio vira col-md-auto e se estreita até o tamanho do próprio botão.
lg, a partir de 992 px
O ponto em torno do qual a maioria dos blocos é desenhada: col-lg-7 e col-lg-5 colocam um título ao lado do texto, col-lg-4 organiza três cartões em uma linha e navbar-expand-lg troca o botão de alternância pelo menu completo. Container: 960 px.
xl, a partir de 1200 px
As colunas mantêm o arranjo lg enquanto o container se alarga para 1140 px, então as linhas de texto ficam mais longas.
xxl, a partir de 1400 px
O container para em 1320 px. Blocos em container-fluid, como o do exemplo, se estendem até as bordas da janela.
Defina o número de colunas de um bloco nos parâmetros e confira nas prévias de celular, tablet e desktop. Para mudar o ponto em que o layout muda, ou para ocultar algo em telas pequenas com d-none d-lg-block, edite a marcação no Code Editor; as páginas de demonstração carregam a folha de estilos completa do Bootstrap, então esses utilitários funcionam. Nenhum controle visual faz isso por dispositivo.
Como personalizar a saída Bootstrap no Mobirise
A maioria dos ajustes dispensa código. Os controles, do mais rápido ao mais técnico:
Parâmetros do bloco
Abra o painel de um bloco para definir espaçamento e fundo, ativar ou desativar itens e escolher quantas colunas ele tem.
Style Editor
Reestilize o tema no Style Editor, cuja lista de fontes cresceu nas versões 6.x.
Níveis de título
Escolha a tag H de cada título. A tag e a predefinição de tamanho são independentes, como o h4 com display-5 no exemplo, então a hierarquia dos títulos continua correta.
Clone Block
Duplique um bloco que você já ajustou e altere só o que muda, em vez de refazer as configurações dele.
Code Editor (pago)
Edite o HTML e o CSS por bloco ou por página: transforme col-lg-4 em col-md-6 col-lg-4, acrescente uma classe utilitária ou escreva suas próprias regras. Vem com todos os planos pagos.
IA para blocos avulsos (pago)
Nos planos premium de IA, o Generate Block with AI cria um bloco novo a partir de um pedido; o equivalente para edição altera um bloco existente.
WebP e contornos de foco
As imagens são convertidas para WebP automaticamente, e quem usa o teclado vê um contorno de foco nítido. Nenhum dos dois exige configuração.
Exporte e continue
Leve os arquivos para o seu próprio editor ou processo de build e mantenha o projeto do Mobirise como cópia principal: arquivos editados não podem ser reabertos nele.
Quando o Mobirise é a ferramenta Bootstrap certa, e quando não é
Boa escolha
- Designers e freelancers que querem sites em Bootstrap 5 sem digitar a grade à mão
- Desenvolvedores que precisam de um front end estático rápido para ampliar depois no próprio editor
- Quem quer ser dono do código e escolher a hospedagem, mesmo sem pagar
- Pessoas que trabalham em um notebook sem Wi-Fi estável; o guia do construtor de sites offline lista o que continua funcionando
- Iniciantes que preferem organizar blocos a aprender classes; veja nossa comparação de construtores de arrastar e soltar
Procure outra opção se
- Seu ponto de partida é um site ou modelo Bootstrap que você já tem; o Bootstrap Studio importa um, e o Pinegrow edita os arquivos diretamente
- Você mantém projetos em Bootstrap 3 ou 4
- Você quer escrever e acompanhar cada classe enquanto trabalha; um editor focado em código, como o Pinegrow, atende melhor
- Você só precisa de um arquivo de tema com suas cores e fontes; o bootstrap.build faz isso de graça
- Você quer controles de ocultar e mover por dispositivo no editor visual; o Webflow permite substituir estilos em cada breakpoint
- Você espera editar código de graça dentro do construtor; o Code Editor exige um plano pago
- Você está criando um aplicativo com backend e contas de usuário
Perguntas frequentes sobre o construtor de Bootstrap
O que é um construtor de Bootstrap?
Um construtor de Bootstrap gera páginas com a grade, os componentes e as classes do framework Bootstrap, para que você tenha layouts responsivos sem escrever essa marcação. O Mobirise e o Bootstrap Studio são construtores visuais de sites; o Pinegrow edita o código que você já tem, e o bootstrap.build só ajusta variáveis de tema.
Qual versão do Bootstrap o Mobirise usa?
O Bootstrap 5. Todos os temas são construídos sobre ele, cada bloco usa a grade e as classes dele, e as páginas de demonstração carregam o pacote de CSS e JavaScript do próprio Bootstrap. Se um projeto precisa continuar no Bootstrap 3 ou 4, o Bootstrap Studio e o Pinegrow ainda funcionam com essas versões.
Existe um construtor de Bootstrap gratuito?
Sim. Dá para criar sites pessoais e comerciais no Mobirise sem pagar, e o aplicativo para desktop exporta o código completo no plano gratuito. O bootstrap.build também é gratuito, mas gera apenas um arquivo de tema. O Pinegrow oferece um período de teste, e o Bootstrap Studio é uma compra única paga.
Posso editar o código Bootstrap no Mobirise?
Sim, com a extensão paga Code Editor, que edita o HTML e o CSS de qualquer bloco ou página. No plano gratuito, exporte e altere os arquivos em outro lugar; o Mobirise não consegue carregá-los de volta, então conclua o trabalho de layout no projeto antes.
Posso importar um modelo ou site Bootstrap existente?
Não. Só projetos feitos no Mobirise abrem no editor, então um modelo comprado em outro lugar ou um site codificado à mão não pode ser carregado. Recrie-o com blocos do Mobirise ou escolha o Bootstrap Studio, que importa HTML, CSS e JavaScript, ou o Pinegrow, que edita arquivos Bootstrap existentes.
Como os blocos do Mobirise se comportam em celulares e tablets?
Eles seguem os breakpoints do Bootstrap. Nos sites de demonstração, a maioria das colunas ocupa a largura total abaixo de 992 pixels, então o conteúdo se empilha, e as colunas ficam lado a lado a partir de lg. Cada bloco se adapta sozinho, então não existe uma versão só para celular para manter sincronizada.
Preciso saber Bootstrap para usar o Mobirise?
Não. Você trabalha com blocos e seus parâmetros, e as classes são escritas para você. Conhecer a grade compensa no Code Editor ou nos arquivos exportados, onde você mesmo pode deslocar breakpoints e acrescentar utilitários.
Posso hospedar o site Bootstrap exportado em qualquer lugar?
Sim. Em qualquer plano, o aplicativo para desktop publica por FTP ou FTPES, no GitHub Pages ou em uma pasta local, e o resultado são arquivos estáticos simples que qualquer hospedagem comum consegue servir. Até 3 sites online também podem ficar em subdomínios do mobirisesite.com, com HTTPS, de graça.
Qual é a diferença entre o Mobirise e o Bootstrap Studio?
Os dois têm aplicativos para desktop para Windows, Mac e Linux. O Mobirise é gratuito para começar, cria a partir de blocos pré-desenhados e também roda no navegador, com um início opcional por IA. O Bootstrap Studio é uma licença paga única, com editor por componente, edição de código integrada, Bootstrap 3 a 5 e importação de sites.
Posso usar o Mobirise como construtor de modelos Bootstrap?
Sim, de duas maneiras. Dentro de um projeto, o Clone Block reaproveita um bloco ajustado em várias páginas; fora dele, uma página exportada vira o ponto de partida para um trabalho codificado à mão. Guarde o projeto se quiser editar o modelo visualmente mais tarde.
Crie sua primeira página Bootstrap 5 com blocos
Instale o Mobirise no seu computador com Windows, Mac ou Linux, ou abra o mesmo construtor em uma aba do navegador. Exporte o código quando quiser.