Bootstrap 5

Guia Completo para Criar Formulários de Checkout Responsivos com Bootstrap 5

Xavier

02 Jun 2025 • 4 min read

Introdução aos Formulários Modernos com Bootstrap 5

Os formulários são componentes cruciais em qualquer aplicação web, especialmente em processos de checkout. Com o lançamento do Bootstrap 5, a criação de formulários tornou-se ainda mais intuitiva e poderosa, graças às suas classes utilitárias e ao sistema de grid redesenhado. Neste guia, vamos explorar como construir um formulário de checkout completo e responsivo, seguindo as melhores práticas demonstradas em tutoriais de desenvolvimento web, como os de Adrian Twarog. Aprenderemos a estruturar o HTML, aplicar classes do Bootstrap 5 e garantir uma ótima experiência do usuário.

Preparando o Ambiente para seu Projeto de Formulário com Bootstrap 5

Antes de começarmos a codificar, é essencial preparar nosso ambiente de desenvolvimento. Para este projeto, utilizaremos o Visual Studio Code (VS Code), um editor de código popular e robusto. O primeiro passo é criar um arquivo chamado index.html na pasta do nosso projeto.

Em seguida, acessaremos o site oficial do Bootstrap (getbootstrap.com) para obter o template inicial. Este template já inclui os links para o CSS e JavaScript do Bootstrap 5, além da estrutura básica HTML5, economizando tempo de configuração.

Estrutura Inicial do Arquivo HTML com Bootstrap 5

O template inicial do Bootstrap 5 fornece o seguinte:

<!doctype html>: Define o tipo de documento como HTML5.
<html lang="en">: Define o idioma da página.
<head>: Contém metadados essenciais como charset, viewport para responsividade e o link para o CSS do Bootstrap.
<body>: Onde o conteúdo visível da página será inserido, incluindo os scripts JavaScript do Bootstrap (como o Popper.js e o próprio bootstrap.min.js) geralmente no final para otimizar o carregamento.

É recomendável o uso de uma extensão como o "Live Server" no VS Code para visualizar as alterações em tempo real no navegador, facilitando o desenvolvimento.

Construindo o Cabeçalho do Formulário de Checkout com Bootstrap 5

Com a estrutura base pronta, começamos a adicionar os elementos do cabeçalho do nosso formulário. Isso inclui o logo, um título principal e uma breve descrição.

Aplicamos classes utilitárias do Bootstrap 5 para estilização:

py-5: Adiciona padding vertical.
text-center: Centraliza o texto e o logo.
bg-light: Define um fundo cinza claro para o corpo da página, destacando o formulário.
Para o logo, definimos dimensões específicas (ex: width="72" e height="72") e classes como d-block e mx-auto para centralizá-lo como um bloco. A classe mb-4 adiciona uma margem inferior.

O título "Checkout form" é inserido em um <h2> e uma descrição como "Below is an example form built entirely with bootstrap." em um <p> com a classe lead para um destaque sutil.

Desenvolvendo os Campos de Endereçamento com Bootstrap 5

A seção de endereço de cobrança é uma das mais importantes. Utilizamos o sistema de grid do Bootstrap 5 para organizar os campos.

Estrutura de Linhas e Colunas com Bootstrap 5

Envolvemos os campos em uma <div class="row g-3">. A classe g-3 controla o espaçamento (gutters) entre as colunas.

Nome e Sobrenome: Cada um em uma <div class="col-sm-6">, ocupando metade da largura em telas pequenas ou maiores. Contêm um <label> com a classe form-label e um <input type="text"> com a classe form-control.
Username: Ocupa uma <div class="col-12">. Utilizamos um <div class="input-group"> para prefixar o campo com um "@" usando <span class="input-group-text">@</span>. O input também recebe a classe form-control.
Email e Endereço: Campos de texto simples, cada um em <div class="col-12">, seguindo a mesma estrutura de label e input com form-control.
País, Estado e CEP: Organizados em uma linha com múltiplas colunas (col-md-5, col-md-4, col-md-3). País e Estado são campos <select> com a classe form-select. Cada <select> contém múltiplas tags <option>. O CEP é um input de texto.

Para validação, adicionamos <div class="invalid-feedback"> após cada campo obrigatório.

Adicionando Checkboxes e Opções de Pagamento no Formulário Bootstrap 5

Checkboxes e radio buttons são estilizados de forma consistente no Bootstrap 5.

Checkboxes com Bootstrap 5

Para opções como "Shipping address is the same as my billing address" e "Save this information for next time", utilizamos a seguinte estrutura:

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="sameAddress">
  <label class="form-check-label" for="sameAddress">Shipping address is the same as my billing address</label>
</div>

Opções de Pagamento com Rádio Buttons no Bootstrap 5

Para selecionar o método de pagamento (Credit card, Debit card, PayPal), cada opção é um radio button dentro de uma <div class="form-check">:

<div class="form-check">
  <input id="creditCard" name="paymentMethod" type="radio" class="form-check-input" checked required>
  <label class="form-check-label" for="creditCard">Credit card</label>
</div>

O atributo name="paymentMethod" garante que apenas uma opção possa ser selecionada. A opção padrão é marcada com checked.

Implementando os Detalhes do Cartão de Crédito com Bootstrap 5

Os campos para detalhes do cartão de crédito são agrupados usando o grid do Bootstrap 5.

Nome no Cartão e Número do Cartão: Dispostos em uma <div class="row gy-3"> (gutters verticais). Cada um em uma <div class="col-md-6">. Ambos são inputs de texto com form-control. Uma pequena descrição (<small class="text-muted">) pode ser adicionada abaixo do campo "Nome no Cartão".
Expiração e CVV: Também em <div class="col-md-3"> cada, dentro da mesma linha.

Finalizando com o Botão de Checkout no Bootstrap 5

Por fim, adicionamos um botão para submeter o formulário:

<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>

A classe w-100 faz o botão ocupar toda a largura disponível. btn-primary define a cor azul padrão e btn-lg aumenta seu tamanho.

Análise e Considerações Finais sobre Formulários Bootstrap 5

O Bootstrap 5 simplifica enormemente a criação de formulários responsivos e visualmente agradáveis. A reformulação dos controles de formulário e a introdução de novas classes utilitárias, como as de espaçamento (py-5, mb-3) e gutters (g-3, gy-3), oferecem grande flexibilidade. A documentação oficial do Bootstrap é um excelente recurso para explorar todas as possibilidades e componentes disponíveis. A padronização visual e a facilidade de customização tornam o Bootstrap 5 uma escolha sólida para desenvolvedores web que buscam eficiência e design moderno.