Crie sites incríveis com Bootstrap: Tutorial para iniciantes

Assuntos do Post

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.

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>