Matricule-se
Voltar para o blog
Full Stack

Guia rápido – Aprenda como usar Bootstrap do Zero

Pedro Surreaux

Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!

Bootstrap é um framework gratuito de HTML, CSS e JavaScript que acelera a criação de sites responsivos. Para usá-lo, você adiciona os links CDN do CSS e do JavaScript no seu HTML e aplica as classes prontas (como container, btn e o sistema de grid) para montar layouts e componentes sem escrever CSS do zero.

Vem com a gente e transforme suas ideias em sites incríveis!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Sem Node instalado, o Bootstrap entra por CDN: a tag link do CSS no head e a tag script do JS antes de fechar o body. A partir daí todo elemento já nasce formatado, e o resto é classe utilitária, container, btn btn-primary, mais os Examples, templates prontos para baixar e adaptar.

Neste vídeo (24 min):

  • 2:00 - O ponto de partida de qualquer biblioteca conhecida é a documentação, e a do Bootstrap é das melhores.
  • 3:30 - A alternativa é o CDN: os arquivos ficam online, e o projeto só precisa de conexão para acessá-los.
  • 5:00 - O CSS entra como uma tag link com rel="stylesheet" dentro do head.
  • 6:00 - E o JavaScript como uma tag script no fim do body, é ele que dá interatividade aos componentes.
  • 7:00 - Teste de que funcionou: um h1 comum já vem com media query e variáveis, bem diferente do estilo padrão do navegador.
  • 8:00 - Comentando o link (Ctrl+;), a página volta ao user agent stylesheet, a prova de que o Bootstrap está ativo.
  • 11:00 - A classe container já entrega um bloco responsivo, com larguras que mudam por breakpoint.
  • 13:00 - Variantes como container-lg mudam a partir de que ponto ele deixa de ocupar 100% da largura.
  • 14:00 - Ctrl+K abre a busca da documentação, o caminho mais rápido para achar um componente.
  • 15:00 - A classe btn sozinha reseta o botão; a cor vem de btn-primary, btn-success, btn-danger e afins.
  • 16:00 - Ainda há variações de estilo (btn-outline-*) e de tamanho (btn-lg, btn-sm).
  • 17:00 - Em Examples estão os blocos prontos, cabeçalhos, álbuns, blogs, inclusive com modo claro/escuro automático.
  • 19:00 - Dá para baixar o pacote de exemplos e copiar o HTML (e o CSS extra) direto para o projeto.
  • 22:00 - A contrapartida honesta: o Bootstrap deixa “cara de Bootstrap” e customizar a fundo dá trabalho, ótimo para entregar rápido, menos para design muito próprio.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é o Bootstrap?

É uma biblioteca que facilita a criação de sites modernos e responsivos, ou seja, que se adaptam bem a diferentes tamanhos de tela, seja de celulares, tablets ou computadores.

No próprio site do Bootstrap, você pode adquirir gratuitamente uma variedade de estilos prontos, com sistema de grid para organizar o layout e vários componentes interativos, como botões, menus, formulários e cartões.

Além de não precisar programar tudo do zero, a ferramenta funciona com HTML, CSS e JavaScript!

Como acessar o Bootstrap?

Para começar a usar o Bootstrap, basta acessar o site oficial, onde você encontrará toda a documentação necessária. O material disponível é bem organizado e detalhado, trazendo exemplos práticos e explicações claras sobre como utilizar os recursos do framework.

Página inicial do site do Boostrap em português

Uma das formas mais rápidas e fáceis de começar é através dos links CDN, na parte de downloads. Essa opção permite carregar o Bootstrap diretamente da internet, sem precisar baixar nenhum arquivo, garantindo que você sempre utilize a versão mais atualizada.

Parte do site em inglês onde ficam os links CDN

Basta copiar e colar os links fornecidos na documentação dentro do seu código HTML, e você já poderá aproveitar os estilos e componentes da biblioteca sem complicação.

Pronto ver isso mais de perto? Vamos ao código!

Mãos no código! – Instalando o Boostrap

Para começar a escrever seu primeiro código com Bootstrap, abra o VSCode e crie um arquivo chamado index.html.

Obs.: Se você ainda não tem o VSCode instalado ou não sabe como usá-lo, pode conferir nosso guia completo nesta aula.

Dentro do arquivo index.html, é possível gerar a estrutura básica do HTML rapidamente. Basta digitar um ponto de exclamação (!) e pressionar a tecla Tab, e o editor completará automaticamente o código inicial do documento.

Agora, dentro da seção <head>, adicione o link CDN do CSS do Bootstrap. Esse link permitirá que seu site utilize os estilos da biblioteca sem precisar instalar nada no computador. Depois, no final do <body>, inclua o link CDN do JavaScript, que é necessário para o funcionamento de alguns componentes interativos do Bootstrap.

O código deve ficar assim:

HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu primeiro site com Bootstrap</title>
    <link rel="stylesheet" href="link.cdn.bootstrap.css">
</head>
<body>
    <h1>Iniciando com o Bootstrap</h1>
    <script src="link.cdn.bootstrap.js"></script>
</body>
</html>

Agora salve o arquivo e abra ele no navegador.

À primeira vista, pode parecer que não há diferença além do título na página, mas o Bootstrap já está aplicando uma série de configurações padrão. Para conferir, pressione F12 para abrir as ferramentas do desenvolvedor e veja como os estilos do Bootstrap já estão sendo carregados.

Menu do inspecionar elementos com várias linhas de código com classes e configurações importadas pelo Bootstrap
Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Adicionando elementos

Agora que o Bootstrap já está carregado no nosso projeto, podemos começar a adicionar elementos à página. Primeiro, vamos inserir um título e um parágrafo dentro de uma estrutura simples de <div> para organizar o conteúdo.

HTML
<div>

    <h2>Primeiro tópico da minha página</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

Com esse código, temos um título e um texto básico na página. Mas o Bootstrap permite melhorar a estrutura e a aparência do nosso site de forma simples. Um dos primeiros recursos que podemos utilizar é a responsividade, garantindo que o layout se adapte automaticamente a diferentes tamanhos de tela, como celulares, tablets e monitores.

Para isso, basta envolver o conteúdo dentro de uma <div> com a classe container, que aplica margens e alinhamentos automáticos para melhorar a visualização. O código atualizado fica assim:

HTML
<div class="container">

    <h2>Primeiro tópico da minha página</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

Depois de salvar as alterações, volte para o navegador, pressione F12 e clique no ícone de responsividade nas ferramentas do desenvolvedor. Isso permitirá visualizar como o layout se ajusta a diferentes tamanhos de tela.

Além disso, o Bootstrap oferece diversas configurações de responsividade que permitem definir o comportamento dos elementos de acordo com a largura da tela. Para aprender mais sobre essas opções, confira a seção específica sobre grids e breakpoints na documentação oficial do Bootstrap.

Como adicionar botões?

Os botões no Bootstrap são fáceis de usar e altamente personalizáveis. Para começar, acesse a seção de botões na documentação oficial e veja como eles funcionam. A classe básica utilizada para estilizar um botão é .btn.

Parte do site em inglês que fala dos botões

Se adicionarmos um botão simples ao nosso código e atribuirmos essa classe, ele já ganhará um estilo padrão do Bootstrap.

HTML
<button class="btn">Clique aqui!</button>

Esse é um botão básico, mas o Bootstrap permite aplicar diferentes estilos de forma muito simples. Na documentação, é possível encontrar diversas opções de personalização, como cores e tamanhos.

Parte do site em inglês com várias opções de botões com cores e formatos diferentes.

Vamos testar alguns exemplos:

HTML
<button class="btn btn-primary">Clique aqui!</button>

<button class="btn btn-secondary">Clique aqui de novo!</button>

O primeiro botão terá uma cor azul, que é o estilo padrão para ações principais, enquanto o segundo usará um tom de cinza, ideal para ações secundárias. Além disso, há muitas outras opções disponíveis para modificar tamanho, bordas e até efeitos de hover.

Dois tipos de botões implementados na página

Com o Bootstrap, criar botões estilizados e funcionais se torna muito mais rápido e prático, sem precisar escrever linhas complexas de CSS.

Templates prontos

O Bootstrap oferece uma seção com templates prontos no seu site, que inclui desde layouts completos até componentes específicos, como cabeçalhos e rodapés. Essas opções são ótimas para quem quer acelerar o processo de desenvolvimento e criar um site bonito e funcional sem começar do zero.

Parte do site em português que mostra os templates prontos

No site do Bootstrap, você pode acessar a área de Exemplos, onde encontrará diversos templates que você pode usar diretamente em seu projeto.

Basta fazer o download e extrair a pasta para dentro da pasta do seu projeto. Ao abrir o VSCode, você verá uma grande variedade de elementos e classes que podem ser facilmente integrados ao seu código.

Menu lateral do VSCode com todas as pastas de arquivos importados do bootstrap

Por exemplo, você pode copiar um header de um template e colá-lo diretamente no seu arquivo HTML. Assim que você atualizar a página no navegador, o cabeçalho já estará visível, com o layout e o estilo prontos para usar.

A página usada na aula com um cabeçalho importado do Boostrap


Você pode continuar fazendo isso com outros elementos. Se necessário, pode substituir imagens já existentes por outras externas.

O legal é que você pode usar esses templates completos ou selecionar apenas os elementos que deseja para compor seu projeto, como botões, cards, formulários e imagens. E não precisa configurar quase nada, basta copiar o link da imagem e substituí-lo no código.

 Isso torna o desenvolvimento muito mais ágil e simples, mesmo para quem está começando.

Cuidados com o Bootstrap

Embora o Bootstrap facilite muito o desenvolvimento de sites, é importante ter alguns cuidados ao usá-lo. Como ele traz diversas classes prontas, pode acabar carregando estilos e funcionalidades que talvez você não precise, tornando o código mais pesado do que o necessário.

Outro ponto a considerar é que, por ser uma biblioteca muito popular, os sites que usam Bootstrap sem personalização podem acabar ficando com um visual parecido. Para evitar isso, vale a pena modificar algumas classes ou adicionar estilos próprios em um arquivo CSS separado.

Além disso, o uso excessivo de componentes prontos pode limitar a flexibilidade do design, dificultando algumas personalizações mais avançadas. Por isso, antes de adicionar muitos elementos prontos, é bom avaliar se realmente são necessários ou se é melhor criar algo mais leve e customizado.

Perguntas frequentes

1. O que é o Bootstrap e para que serve?

Bootstrap é uma biblioteca (framework) de front-end que reúne estilos, componentes e um sistema de grid prontos em HTML, CSS e JavaScript. Serve para criar sites modernos e responsivos com rapidez, adaptando o layout a celulares, tablets e computadores, sem precisar programar cada botão, menu ou formulário do zero.

2. Como instalar o Bootstrap em um projeto?

A forma mais rápida é pelos links CDN: você copia a tag link do CSS do Bootstrap dentro do <head> e a tag script do JavaScript no fim do <body> do seu HTML. Assim, o navegador carrega a biblioteca direto da internet, sempre na versão atual, sem baixar arquivos.

3. Como criar botões estilizados no Bootstrap?

Aplique a classe base btn a um elemento <button> e combine com uma classe de estilo, como btn-primary (azul, para ações principais) ou btn-secondary (cinza, para ações secundárias). A documentação oficial traz opções para mudar cor, tamanho, bordas e efeitos de hover sem escrever CSS.

4. Quais cuidados ter ao usar o Bootstrap?

Use só o que precisar: as muitas classes prontas podem deixar o código pesado. Como a biblioteca é popular, sites sem personalização acabam com visual parecido, então vale ajustar classes ou criar um CSS próprio. Evite excesso de componentes prontos, que limitam a flexibilidade de designs mais avançados.

Conclusão - O que aprendemos sobre Bootstrap?

Neste guia, vimos como o Bootstrap pode facilitar o desenvolvimento de sites, trazendo estilos prontos, componentes reutilizáveis e suporte à responsividade sem precisar escrever CSS do zero.

Aprendemos a acessar a documentação oficial, instalar a biblioteca no projeto e adicionar elementos básicos, como títulos, textos, botões e containers responsivos.

Exploramos também a seção de templates prontos, que permite acelerar o processo de criação ao copiar e personalizar layouts completos. Além disso, destacamos alguns cuidados importantes, como evitar o excesso de classes e elementos desnecessários para manter o site leve e otimizado.

Com esse conhecimento, você já pode começar a construir suas próprias páginas com Bootstrap e experimentar novas possibilidades dentro da biblioteca. Agora é hora de praticar, testar diferentes estilos e criar layouts incríveis!

Continue seus estudos de front-end com nossos conteúdos sobre HTML, CSS e JavaScript.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Pedro Surreaux

Autor do artigo

Pedro Surreaux

Redator de Publicações

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts