Crie sites incríveis com Bootstrap: Tutorial para iniciantes

Bootstrap é uma estrutura CSS gratuita e de código aberto direcionada ao desenvolvimento web front-end responsivo e mobile-first. Ele contém modelos de design baseados em CSS e JavaScript para tipografia, formulários, botões, navegação e outros componentes de interface.

Bootstrap foi criado por Mark Otto e Jacob Thornton no Twitter e agora é usado por mais de 12 milhões de sites. Bootstrap é de código aberto e está disponível no GitHub.

Table of Contents

Por que todos falam sobre o Bootstrap?

Bootstrap é a estrutura HTML, CSS e JavaScript mais popular para o desenvolvimento de sites responsivos e voltados para dispositivos móveis. O Bootstrap é totalmente gratuito para baixar e usar.

Os desenvolvedores da Web adoram o Bootstrap porque os ajuda a criar sites responsivos de maneira mais rápida e fácil. Bootstrap é uma estrutura front-end que inclui componentes CSS e JavaScript pré-construídos que são fáceis de usar e personalizar.

Bootstrap é fácil de usar. Você só precisa incluir os arquivos Bootstrap CSS e JS em seu código HTML. Bootstrap também está disponível como arquivos Sass e Less.

Como instalar o Bootstrap em um projeto

Para instalar o Bootstrap de forma rápida, você pode instalar via package manager ou via CDN, vou explicar melhor como realizar e o que é cada um destes a seguir:

Instalação via Package Manager

\"\" — Instalando o Bootstrap via Package Manager CLI

Um package manager (gerenciador de pacotes) é uma ferramenta usada para automatizar a instalação, atualização, configuração e remoção de software. Em particular, ele gerencia bibliotecas de código de terceiros e suas dependências, permitindo que desenvolvedores integrem facilmente funcionalidades adicionais em seus projetos sem ter que reinventar a roda. Os package managers são amplamente utilizados em diversos ecossistemas de desenvolvimento de software.

Para instalar é muito fácil, abra seu CLI e caso já tenha o node instalado em seu computador digite:

npm install bootstrap@5.3.3

ou caso tenha o ruby:

gem install bootstrap -v 5.3.3

As vantagens deste tipo de instalação no seu projeto são:

Facilita a instalação e atualização de bibliotecas.
Gerencia as dependências automaticamente.
Mantém o projeto organizado e atualizado com as versões mais recentes dos pacotes.

Instalação via CDN

Uma Content Delivery Network (CDN) é uma rede de servidores distribuídos geograficamente que trabalham juntos para entregar conteúdo da web de forma rápida e eficiente. As CDNs armazenam cópias em cache do conteúdo estático do site, como imagens, vídeos, scripts e estilos, em vários pontos ao redor do mundo. Quando um usuário acessa um site, a CDN entrega o conteúdo a partir do servidor mais próximo do usuário, reduzindo a latência e melhorando a velocidade de carregamento do site.

Para instalar via CDN, só é necessário colar os seguintes códigos dentro da tag <head> do seu código:

<link href=\”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\” rel=\”stylesheet\”>
<script src=\”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\”></script>

A vantagem da instalação via CND é:

Reduz a latência e melhora o tempo de carregamento do site.
Aumenta a disponibilidade e a redundância do conteúdo.
Melhora a experiência do usuário, especialmente em locais distantes do servidor de origem.

Grid responsiva com Bootstrap

Bootstrap também oferece a capacidade de criar designs responsivos facilmente. O design responsivo é um método de desenvolvimento web que faz com que suas páginas tenham uma boa aparência em todos os dispositivos (desktops, laptops, tablets e telefones).

O sistema de grade responsivo do Bootstrap é baseado em uma grade de 12 colunas, com medianiz de 30px (15px em cada lado de uma coluna).

O sistema de grade Bootstrap é responsivo e as colunas serão reorganizadas dependendo do tamanho da tela:

Em uma tela grande, o layout das colunas será: col-lg-*

Em uma tela média, o layout de colunas será: col-md-*

E em uma tela de celular (pequena) o layout das colunas será: col-sm-*

Em uma tela extra-pequena, o código será: col-xs-*

O * representa o número de colunas de 12 que a coluna deve abranger. Então, por exemplo, se você quiser que uma coluna ocupe 8 colunas em uma tela grande, você usaria: col-lg-8. Se você quiser que a coluna ocupe 4 colunas em uma tela média, você usaria: col-md-4.

Componentes do Bootstrap

Os componentes do Bootstrap podem ser divididos em três categorias: layout, conteúdo e componentes.

Os componentes de layout são responsáveis pela estrutura geral da página web. Eles incluem o sistema de grade, usado para criar layouts responsivos, e o objeto de mídia, usado para criar imagens e vídeos responsivos.

Os componentes de conteúdo são responsáveis pelo conteúdo da página web. Eles incluem a tipografia, que é usada para estilizar o texto, e as tabelas, que são usadas para exibir dados tabulares.

Os componentes são responsáveis pelos elementos interativos da página web. Eles incluem os botões, que são usados para acionar ações, e os modais, que são usados para exibir informações em uma janela pop-up.

Como funcionam os containers no bootstrap?

Os contêineres são os elementos de layout mais básicos do Bootstrap, são necessários para utilizar o sistema de grid padrão do framework. Os contêineres são usados para conter, preencher e (às vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser aninhados, a maioria dos layouts não exige um contêiner aninhado.

O Bootstrap contem 3 tipos de container por padrão:

.container, que define uma largura máxima em cada breakpoint responsivo
.container-{breakpoint}, que tem largura: 100% até o breakpoint especificado
.container-fluid, que tem largura: 100% em todos os pontos de interrupção

Como criar um container no Bootstrap?

Para criar um container padrão com esse framework é muito simples, vamos utilizar o exemplo do .container demonstrado acima:

<div class=\"container\">
<!– Conteudo do seu container aqui dentro –>
</div>

Você ainda pode trocar a class para o .container-fluid, que vai fazer com que o container tenha a largura total da pagina, abrangendo toda a largura da janela de visualização.

Como criar um Grid com colunas no Bootstrap5?

O sistema de grid usa uma série de containeres, rows e columns, que simplificando são: você precisa de um container, dentro deste container você separa por linhas e dentro das linhas vão as colunas. Esse design é totalmente flexível e podemos ter um exemplo a seguir.

Você pode adicionar o layout de colunas dentro da div de .container que vimos anteriormente, utilizar a div com propriedade .row, que vai criar a linha inicial que irá conter a coluna, uma div com a classe .col. Vamos ao exemplo de código para que você possa visualizar:

<div class=\”container text-center\”>
<div class=\”row\”>
<div class=\”col\”>
<!– Conteudo da coluna aqui –>
</div>
<div class=\”col\”>
Column
</div>
<div class=\”col\”>
Column
</div>
</div>
</div>

As colunas irão se ajustar de acordo com o tamanho do container e também de acordo com o número de colunas, fazendo com que todas sempre ocupem proporcionalmente o mesmo espaço, caso queira que uma coluna seja maior que a outra.

Podemos utilizar o calculo de grid que existe (são 12 unidades máximas), onde você pode especificar o tamanho maior de uma coluna pela seguinte propriedade: col-*, onde o asterisco pode representar um numero de 1 a 12, que irá dizer qual o espaço que aquela coluna irá ocupar no espaço do container.

Como eu utilizo o Margin e Padding?

As propriedades margin e padding podem ser adicionadas como um elemento de classe na div, tendo quatro subpropriedades que podem ser especificadas, indicando de qual lado será aplicado o margin ou padding, sendo eles start, end, top ou bottom com numeração de 1 a 6. Para adicionar essas propriedades você pode adicionar a classe .m ou .p que indicam margin ou padding respectivamente, com isso ao adicionar .ms-* será indicado que haverá uma margin do lado esquerdo de até 6 unidades. Podemos observar melhor no exemplo de código a seguir:

<div class=\”p-2 ms-1 me-2 mt-1 mb-3\”>

<!– Conteudo da div aqui –>

</div>

No código acima, defini um padding geral de 2, uma margin no lado esquerdo de 1, no lado direito de 2, no topo de 1 e na parte inferiro de 3.

Código completo de um site de exemplo em bootstrap

A seguir irei demonstrar um exemplo completo de site que utilizei bootstrap em HTML simples, gerando uma navbar, sidebar e demais componentes que você pode verificar com mais detalhes na documentação do site oficial do bootstrap:

<!DOCTYPE html>

<html lang=\”pt-br\”>

<head>

<meta charset=\”UTF-8\”>

<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>

<title>Teste Bootstrap – exemplo de página</title>

<!– Bootstrap códigos: Start –>

<link href=\”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\” rel=\”stylesheet\”>

<script src=\”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\”></script>

<!– Bootstrap códigos: End –>

</head>

<body>

<div class=\”container-flex\”>

<!– navbar: start –>

<nav class=\”navbar navbar-expand-lg bg-body-tertiary\”>

<div class=\”container\”>

<a class=\”navbar-brand\” href=\”#\”>

<img width=\”35\” src=\”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png\”

alt=\”Tutorial Bootstrap\”>

Navbar de teste

</a>

<button class=\”navbar-toggler\” type=\”button\” data-bs-toggle=\”collapse\”

data-bs-target=\”#navbarSupportedContent\” aria-controls=\”navbarSupportedContent\”

aria-expanded=\”false\” aria-label=\”Toggle navigation\”>

<span class=\”navbar-toggler-icon\”></span>

</button>

<div class=\”collapse navbar-collapse\” id=\”navbarSupportedContent\”>

<ul class=\”navbar-nav me-auto mb-2 mb-lg-0\”>

<li class=\”nav-item\”>

<a class=\”nav-link active\” aria-current=\”page\” href=\”#\”>Home</a>

</li>

<li class=\”nav-item\”>

<a class=\”nav-link\” href=\”#\”>Link</a>

</li>

<li class=\”nav-item dropdown\”>

<a class=\”nav-link dropdown-toggle\” href=\”#\” role=\”button\” data-bs-toggle=\”dropdown\”

aria-expanded=\”false\”>

Dropdown

</a>

<ul class=\”dropdown-menu\”>

<li><a class=\”dropdown-item\” href=\”#\”>Link 1</a></li>

<li><a class=\”dropdown-item\” href=\”#\”>Outro Link</a></li>

<li>

<hr class=\”dropdown-divider\”>

</li>

<li><a class=\”dropdown-item\” href=\”#\”>Link após divisor</a></li>

</ul>

</li>

<li class=\”nav-item\”>

<a class=\”nav-link disabled\” aria-disabled=\”true\”>Link Desabilitado</a>

</li>

</ul>

<form class=\”d-flex\” role=\”search\”>

<input class=\”form-control me-2\” type=\”search\” placeholder=\”Pesquisa…\” aria-label=\”Search\”>

<button class=\”btn btn-outline-primary\” type=\”submit\”>Pesquisar</button>

</form>

</div>

</div>

</nav>

<!– navbar: end –>

<div class=\”container mt-2\”>

<div class=\”row\”>

<!– coluna principal: start –>

<div class=\”col-lg-8 col-md-8 col-sm-12\”>

<h1>Hello World!</h1>

<!– slider: start –>

<div id=\”carouselExampleCaptions\” class=\”carousel slide\”>

<div class=\”carousel-indicators\”>

<button type=\”button\” data-bs-target=\”#carouselExampleCaptions\” data-bs-slide-to=\”0\” class=\”active\” aria-current=\”true\” aria-label=\”Slide 1\”></button>

<button type=\”button\” data-bs-target=\”#carouselExampleCaptions\” data-bs-slide-to=\”1\” aria-label=\”Slide 2\”></button>

<button type=\”button\” data-bs-target=\”#carouselExampleCaptions\” data-bs-slide-to=\”2\” aria-label=\”Slide 3\”></button>

</div>

<div class=\”carousel-inner\”>

<div class=\”carousel-item active\”>

<img src=\”https://img.freepik.com/fotos-gratis/vista-incrivel-de-uma-falesia-verde-perto-do-mar-no-arquipelago-dos-acores-portugal_181624-48407.jpg?w=1380&t=st=1722793038~exp=1722793638~hmac=e05ceb856e2cbf9be5de998bdeb11872aeba52023132146b1b22a7309593dc0b\” class=\”d-block w-100\” alt=\”…\”>

<div class=\”carousel-caption d-none d-md-block\”>

<h5>Primeiro label de slide</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

</div>

<div class=\”carousel-item\”>

<img src=\”https://img.freepik.com/fotos-gratis/bela-foto-aerea-de-uma-praia-com-colinas-ao-fundo-ao-por-do-sol_181624-24143.jpg?w=1380&t=st=1722793054~exp=1722793654~hmac=7f8d77a4d7e35372bb6e88c9115519fc1430e268d6685bbf55f3ed8a769f8230\” class=\”d-block w-100\” alt=\”…\”>

<div class=\”carousel-caption d-none d-md-block\”>

<h5>Segundo label de slide</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

</div>

<div class=\”carousel-item\”>

<img src=\”https://img.freepik.com/fotos-gratis/caminho-no-meio-de-edificios-sob-um-ceu-escuro-no-japao_181624-43078.jpg?w=1380&t=st=1722793072~exp=1722793672~hmac=a84b7f162777b70023d8ca6bed7efbb8f9f5e4fc7f3e871c3a37c2eeaea3705e\” class=\”d-block w-100\” alt=\”…\”>

<div class=\”carousel-caption d-none d-md-block\”>

<h5>Terceiro titulo do slide</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

</div>

</div>

<button class=\”carousel-control-prev\” type=\”button\” data-bs-target=\”#carouselExampleCaptions\” data-bs-slide=\”prev\”>

<span class=\”carousel-control-prev-icon\” aria-hidden=\”true\”></span>

<span class=\”visually-hidden\”>Previous</span>

</button>

<button class=\”carousel-control-next\” type=\”button\” data-bs-target=\”#carouselExampleCaptions\” data-bs-slide=\”next\”>

<span class=\”carousel-control-next-icon\” aria-hidden=\”true\”></span>

<span class=\”visually-hidden\”>Next</span>

</button>

</div>

<!– slider: end –>

<div class=\”card\”>

<img src=\”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png\” class=\”card-img-top\” alt=\”…\”>

<div class=\”card-body\”>

<!– titulo do post: start –>

<a href=\”#\” class=\”link-offset-2 link-underline link-underline-opacity-0\”>

<h5 class=\”card-title\”>Titulo do post</h5>

</a>

<!– titulo do post: end –>

<!– descrição do post: start –>

<p class=\”text-secondary\”>

teste de post…

</p>

<!– descrição do post: end –>

<!– modal: start –>

<div class=\”m-3 text-end\”>

<button type=\”button\” class=\”btn btn-primary\” data-bs-toggle=\”modal\” data-bs-target=\”#exampleModal\”>

Leia mais

</button>

</div>

<!– modal: end –>

</div>

</div>

</div>

<!– coluna principal: end –>

<!– sidebar: start –>

<div class=\”col-lg-4 col-md-4 col-sm-12\”>

<!– exemplo de card que pode ser um widget: start –>

<div class=\”card mb-3\”>

<div class=\”card-header\”>

Primeiro widget

</div>

<div class=\”card-body\”>

<ul class=\”list-group list-group-flush\”>

<li class=\”list-group-item\”>Primeiro elemento</li>

<li class=\”list-group-item\”>Outro elemento</li>

<li class=\”list-group-item\”>Elemento de lista</li>

</ul>

</div>

</div>

<!– exemplo de card que pode ser um widget: end –>

<!– exemplo de card que pode ser um widget: start –>

<div class=\”card\”>

<img src=\”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png\”

class=\”card-img-top\” alt=\”…\”>

<div class=\”card-body\”>

<h5 class=\”card-title\”>Titulo do card</h5>

<p class=\”card-text\”>Exemplo de texto do card</p>

</div>

</div>

<!– exemplo de card que pode ser um widget: end –>

</div>

<!– sidebar: end –>

</div>

</div>

</div>

<!– corpo da modal: start –>

<div class=\”modal fade\” id=\”exampleModal\” tabindex=\”-1\” aria-labelledby=\”exampleModalLabel\” aria-hidden=\”true\”>

<div class=\”modal-dialog\”>

<div class=\”modal-content\”>

<div class=\”modal-header\”>

<h1 class=\”modal-title fs-5\” id=\”exampleModalLabel\”>Titulo do post</h1>

<button type=\”button\” class=\”btn-close\” data-bs-dismiss=\”modal\” aria-label=\”Close\”></button>

</div>

<div class=\”modal-body\”>

<img src=\”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png\” alt=\”\”>

<p>

Corpo da postagem

</p>

</div>

<div class=\”modal-footer\”>

<p>

Teste de postagem

</p>

</div>

</div>

</div>

</div>

<!– corpo da modal: end –>

</body>

</html>

Por que todos falam sobre o Bootstrap?