Na última semana a tão aguardada versão 5 do Bootstrap foi lançada. Neste artigo iremos ver as novidades que chegam nesta versão e como elas poderão ser úteis para nosso desenvolvimento se desejamos utilizar esse incrível framework em nossos projetos.
Como instalar o novo Bootstrap
Para usar o novo Bootstrap nós podemos simplesmente informar a sua CDN em nossas tags e . Essa informação está disponível no site do Bootstrap, na área de download.
Uma outra alternativa é instalar o Bootstrap utilizando algum gerenciador de pacotes, como o npm. Para fazer isso, basta executar npm install bootstrap em seu Terminal.

Daí, podemos fazer referência para os arquivos CSS e JS desse framework em nosso código:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Agora que sabemos como usar o Bootstrap em sua versão mais atual, vamos partir para as novidades de fato.
Novo Componente Offcanvas
O novo componente offcanvas consiste em um painel lateral que não faz parte da área visível do site, mas que pode ser usado para exibir informações para os usuários.
Para utilizá-lo precisamos criar uma Abaixo vemos um exemplo um offcanvas: Quando usamos apenas a classe “offcanvas”, por padrão nosso Offcanvas não irá aparecer. Contudo, ao adicionar a classe “show” ele será exibido: Para tornar esse processo dinâmico, nós podemos criar um botão que irá manipular como o Offcanvas é exibido ou ocultado na página. Podemos criá-lo dentro de um card: Ele ficará com a seguinte aparência: O que torna possível que ele abra e feche o offcanvas é o atributo data-bs-toggle, que deixa explícito que o objetivo desse botão é ser como que um “interruptor” do nosso offcanvas e essa informação será usada pelo JavaScript do Bootstrap para executar este comportamento. Além disso, o atributo href é muito importante também, pois mostra qual offcanvas nós queremos abrir ou fechar ao clicar no botão. Agora, ao clicar neste botão, veremos o offcanvas sendo aberto e fechado: Outra customização que podemos fazer neste componente é definir em qual posição da página iremos posicionar o nosso offcanvas. Para definir isso, mudamos a classe que está na tag de abertura de nosso offcanvas. Além de ter a classe “offcanvas”, lembre que também tínhamos a classe “offcanvas-start”. Essa classe definia que o nosso offcanvas apareceria à esquerda de nossa página. Se mudarmos essa segunda classe para “offcanvas-end”, ela aparecerá à direita de nossa página: Se definimos a classe como “offcanvas-bottom”, o offcanvas irá aparecer na parte inferior da página: E se definirmos a classe como “offcanvas-top”, o offcanvas aparecerá na parte superior da página: Outra novidade notável foi o novo componente de accordion. Em versões anteriores do Bootstrap poderíamos criar este componente com a classe “card”. A partir da versão 5 poderemos usar a classe “accordion”. Abaixo vemos um exemplo de um accordion: O resultado deste código será o seguinte: Além da classe “accordion”, os atributos data-bs-target e data-bs-toggle são essenciais para que o accordion funcione. Como podemos ver no exemplo, conforme clicamos em outras opções, o item clicado aparece e os outros são ocultados: Isso é possível graças ao atributo data-bs-parent, que é adicionado em todas as divs com a classe “accordion-collapse”. Se esse atributo é removido, os itens que clicamos continuam abertos, mesmo que cliquemos em outras opções: Com estes conceitos podemos desenvolver componentes de accordion, que podem ser úteis em vários contextos em nossos sistemas. A próxima novidade que iremos falar está relacionada com os formulários do Bootstrap. Iremos comentar abaixo algumas simplificações relacionadas aos formulários, assim como a adição de novos recursos. A partir da versão 5 do Bootstrap será possível posicionar os formulários de uma maneira mais simples, usando o conceito já tão conhecido do Grid Layout, usando as classes “row” e “col”. Devido a essa simplificação, as classes “form-group”, “form-row” e “form-inline” foram removidas do Bootstrap 5. Podemos ver como posicionar os campos de nosso formulário com o Grid System no exemplo abaixo: O código ficou bem mais simples, não é mesmo? O resultado deste código será o seguinte: O próximo recurso que iremos analisar são os floating labels, um recurso muito comum na Web Moderna, que consiste em selecionar o texto da label que dá a sugestão para o preenchimento de um campo e “içá-lo” para a parte superior do nosso input. Para criar um floating label, precisamos usar a classe “form-floating” e dentro dela definir a nossa tag input e label. Veja um exemplo abaixo: Um detalhe muito importante que precisamos sempre nos lembrar: é essencial que definamos um placeholder para os inputs de texto. A documentação do Bootstrap informa que isso é necessário pois o framework fará uso do pseudo-seletor :placeholder-shown para conseguir selecionar o conteúdo do texto da tag label. Agora, ao executar nosso código, veremos o seguinte resultado: Note que os campos foram renderizados corretamente. Quando clicamos em algum deles, vemos a seguinte mudança: Note que agora o texto “Senha” aparece um pouco acima em nosso input e podemos digitar o conteúdo dela. Também é possível aplicar esse recurso na tag select. Basta adicionar a classe “form-select” a ela e também criar uma label: Com este código veremos o seguinte resultado: Se estava desejando já há algum tempo adicionar o conceito de floating labels em seus projetos, esse novo recurso do Bootstrap pode ser de grande ajuda! Na versão 5 do Bootstrap também foi adicionada uma melhor estilização para os campos checkbox e radio. Para aplicar esses novos estilos, é necessário usar a classe “form-check” em uma div que irá envolver cada um desses campos. Além disso, devemos fazer uso das classes “form-check-input” e “form-check-label”, como podemos ver abaixo: O resultado deste código será o seguinte: Note que a estilização destes campos está bem mais agradável, seguindo um padrão que está sendo bastante usado nos sistemas mais modernos atualmente. Além de melhorar a estilização de campos de formulário já existentes, na versão 5 também foi adicionado um novo estilo para o input conhecido como switch, que desempenha o mesmo papel de um interruptor. Ele é muito comum principalmente em aplicativos mobile, mas agora também pode ser aplicado em aplicativos Web. Para usar este novo recurso, além de adicionar a classe “form-check”, também devemos usar a classe “form-switch”: Este código resultará no seguinte: Esta novidade é de fato bem interessante, não concorda? Ainda falando de formulários, o Bootstrap 5 trouxe uma novidade relacionada aos campos para selecionar arquivos. Para criar um campo de seleção de arquivos, podemos usar o seguinte código: O resultado será o seguinte: Note que este é mais um caso em que a funcionalidade e estrutura do elemento HTML continuam os mesmos, mas a estilização mudou, tornando-se também mais agradável. Outras novidades que podemos comentar na versão 5 do Bootstrap são: Todas as novidades mostradas neste artigo foram apresentadas em vídeo no Hcode Café, nosso programa semanal sobre programação e tecnologia que é transmitido em nosso canal no YouTube. Além de exibir as novidades, também fizemos comentários sobre boas práticas no desenvolvimento e respondemos às dúvidas dos inscritos ao vivo. Veja a explicação em vídeo clicando aqui. Você pode ver o código desenvolvido neste artigo em nosso GitHub. Esperamos que esse artigo o tenha ajudado a analisar as novidades do Bootstrap 5 e que a nova versão deste incrível framework CSS nos ajude a continuar desenvolvendo projetos incríveis para a Web. Até o próximo artigo! :)<div class="offcanvas offcanvas-start show" tabindex="-1" id="meuOffCanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Atualização feita</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Na última semana nós fizemos uma alteração em nosso sistema. Confira abaixo as novidades
</div>
</div>

<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Atualizações no Sistema</h5>
<p class="card-text">Tivemos atualizações em nosso Sistema na última semana. Clique no botão abaixo para saber mais</p>
<a class="btn btn-success" data-bs-toggle="offcanvas" href="#meuOffCanvas" role="button" aria-controls="meuOffCanvas">Ver atualizações</a>
</div>
</div>





Novo Componente Accordion
<div class="accordion" id="meuAccordion" style="width: 50vw;">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoUm" aria-expanded="true" aria-controls="opcaoUm">
Curso de Bootstrap
</button>
</h2>
<div id="opcaoUm" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Deseja elevar o seu conhecimento no Desenvolvimento Web com um Framework CSS que aumenta a sua produtividade e torna seus projetos cada vez mais profissionais? Gostaria de entender as novidades do Bootstrap 4? Ou será que chegou a hora de elevar o seu conhecimento em Bootstrap e entender sua estrutura e como extrair o que ele tem de melhor?
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoDois" aria-expanded="false" aria-controls="opcaoDois">
Curso Completo de PHP 7
</button>
</h2>
<div id="opcaoDois" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Procurando se especializar como Programador WEB? Ou talvez buscando uma carreira que ofereça mais tempo livre e flexibilidade? Sempre teve curiosidade em aprender de uma forma prática, como programar no lado Back-End
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoTres" aria-expanded="false" aria-controls="opcaoTres">
Dominando Banco de Dados com MySQL
</button>
</h2>
<div id="opcaoTres" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Gostaria de saber por que todos os programadores precisam dominar o banco de dados? Como será que as informações das empresas ficam armazenadas, e como manipular estas informações? Deseja se tornar um programador Web completo
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
</div>



Atualizações nos Formulários
Simplificação no Posicionamento
<form>
<div class="row">
<label for="primeiroNome" class="form-label col-5">Primeiro Nome</label>
<div class="col-7">
<input type="text" class="form-control" id="primeiroNome" />
</div>
</div>
<div class="row">
<label for="sobrenome" class="form-label col-5">Sobrenome</label>
<div class="col-7">
<input type="text" class="form-control" id="sobrenome" />
</div>
</div>
</form>

Floating Labels
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="eu@exemplo.com" />
<label for="email">Endereço de Email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Sua senha" />
<label for="password">Senha</label>
</div>


<div class="form-floating">
<select id="selectEstado" class="form-select">
<option value="" selected>Selecione um estado</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
…
</select>
<label for="selectEstado">Estado de residência</label>
</div>

Melhor Estilização dos Campos Checkbox e Radio
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="lembrar-se">
<label class="form-check-label" for="lembrar-se">
Lembrar de mim
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maioridade" id="checkUm">
<label class="form-check-label" for="checkUm">
Menor de idade
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maioridade" id="checkDois">
<label class="form-check-label" for="checkDois">
Maior de idade
</label>
</div>

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notificacoes">
<label class="form-check-label" for="notificacoes">Habilitar notificações</label>
</div>

Melhor Estilização do Input File
<div>
<label for="photo" class="form-label">Adicionar foto ao seu perfil</label>
<input class="form-control" type="file" id="photo">
</div>

Outras Novidades
Veja mais no YouTube
Conclusão
