Como Fazer

Como Criar uma Tabela de Preços Responsiva com HTML, CSS e Bootstrap 5

Xavier

02 Jun 2025 • 4 min read

Introdução à Criação de Tabelas de Preços com Bootstrap 5

As tabelas de preços são componentes cruciais em muitos websites, especialmente para empresas que oferecem produtos ou serviços com diferentes níveis de funcionalidade e custo. Uma tabela de preços bem projetada não só informa claramente as opções disponíveis, mas também auxilia na conversão de visitantes em clientes. Neste artigo, exploraremos como construir uma tabela de preços responsiva e visualmente atraente utilizando HTML, CSS e o framework Bootstrap 5. Baseamo-nos em um tutorial prático que demonstra passo a passo a criação deste elemento essencial, focando nas melhores práticas e na utilização eficiente dos recursos do Bootstrap.

O Que é o Bootstrap 5 e Por Que Utilizá-lo?

O Bootstrap é um dos frameworks front-end mais populares do mundo, conhecido por facilitar o desenvolvimento de interfaces web responsivas e mobile-first. Sua quinta versão, Bootstrap 5, trouxe melhorias significativas, como a remoção da dependência de jQuery, aprimoramentos no sistema de grid e novos componentes utilitários. Utilizar o Bootstrap 5 permite aos desenvolvedores criar layouts complexos com menos código CSS customizado, acelerando o processo de desenvolvimento e garantindo consistência visual e funcional em diferentes dispositivos e tamanhos de tela.

Configurando o Ambiente para sua Tabela de Preços em Bootstrap 5

Antes de iniciar a codificação, é fundamental preparar o ambiente de desenvolvimento. O processo é simples e direto:

Crie um arquivo HTML: Comece criando um arquivo index.html no seu editor de código preferido, como o Visual Studio Code.
Adicione o template básico HTML5: Inclua a estrutura HTML básica.
Incorpore o Bootstrap 5: A maneira mais rápida de incluir o Bootstrap em seu projeto é utilizando a CDN (Content Delivery Network) oficial. Visite o site getbootstrap.com e copie os links para o CSS do Bootstrap (dentro da tag <head>) e para o JavaScript do Bootstrap (antes de fechar a tag <body>). Este template inicial já inclui as metatags necessárias para responsividade.

Construindo a Estrutura da Tabela de Preços com HTML e Bootstrap 5

Com o ambiente configurado, podemos começar a construir a estrutura da nossa tabela de preços.

1. Título e Descrição da Seção

Uma boa prática é iniciar com um título claro e uma breve descrição para a seção de preços. Utilizaremos classes do Bootstrap para estilização:

Crie um <div> com a classe container para centralizar o conteúdo e aplicar espaçamentos adequados.
Adicione um <h1> para o título principal (ex: "Preços") e aplique a classe display-4 para um destaque visual maior e text-center para centralizar o texto.
Insira um parágrafo <p> com a classe lead para uma descrição concisa abaixo do título, também centralizado com text-center.
Para um espaçamento vertical adequado, a classe py-5 (padding no eixo Y) pode ser adicionada ao container.

2. Estrutura dos Cards de Preços em Bootstrap 5

Cada plano de preço será representado por um "card", um componente versátil do Bootstrap. Para exibir os cards lado a lado e garantir a responsividade, utilizaremos o sistema de grid do Bootstrap:

Crie um <div> com a classe container e, dentro dele, um <div> com a classe row. É importante adicionar a classe text-center ao container dos cards para que o conteúdo interno dos cards também seja centralizado.
Dentro da row, cada plano de preço será um <div> com a classe col. Para controlar o número de colunas em diferentes tamanhos de tela, usamos classes como row-cols-1 (uma coluna em telas pequenas) e row-cols-md-3 (três colunas em telas médias ou maiores). Adicione também mb-4 (margin bottom) a cada col para espaçamento em visualizações empilhadas.

3. Detalhando Cada Card de Preço com Bootstrap 5

Dentro de cada <div class="col">, construiremos o card:

Utilize um <div> com a classe card mb-4 rounded-3 shadow-sm. A classe shadow-sm adiciona uma sombra sutil, melhorando a profundidade visual. Variações como shadow-lg podem ser usadas para sombras mais pronunciadas em planos específicos.
Cabeçalho do Card (card-header): Dentro do card, adicione um <div> com a classe card-header py-3. Nele, insira um <h4> com a classe my-0 fw-normal (fw-normal é uma abreviação para font-weight-normal) para o nome do plano (ex: "Free", "Pro", "Enterprise").
Corpo do Card (card-body): Adicione um <div> com a classe card-body. É aqui que incluiremos o preço, a lista de funcionalidades e o botão de call-to-action.
- Preço: Utilize um <h1> com as classes card-title pricing-card-title my-0 (my-0 remove margens verticais). O preço pode ser formatado como "$0 /mês". A tag <small> com as classes text-muted fw-light (fw-light para font-weight-light) torna o "/mês" menos proeminente.
- Lista de Funcionalidades: Use uma lista não ordenada <ul> com as classes list-unstyled mt-3 mb-4 para remover marcadores padrão e adicionar margens. Cada item da lista <li> representará uma funcionalidade do plano.
- Botão Call-to-Action: Adicione um <button> ou um link <a> estilizado como botão. Para um botão que ocupe toda a largura do card, utilize as classes w-100 btn btn-lg. Para o estilo, pode-se usar btn-outline-primary para um botão com borda e btn-primary para um botão preenchido, ideal para o plano em destaque.

Repita a estrutura do card para cada plano de preço, ajustando o conteúdo (nome do plano, preço, funcionalidades) conforme necessário.

Estilização e Responsividade da Tabela de Preços em Bootstrap 5

O Bootstrap 5 já oferece grande parte da estilização e responsividade através de suas classes utilitárias. Ao usar o sistema de grid (row, col, row-cols-md-3), a tabela se adaptará automaticamente a diferentes tamanhos de tela. Os cards empilharão verticalmente em telas menores e se alinharão horizontalmente em telas maiores.

A customização adicional pode ser feita com CSS, mas o objetivo do Bootstrap é minimizar essa necessidade. As classes de sombra (shadow-sm, shadow-lg), espaçamento (py-3, mt-3, mb-4) e tipografia (display-4, lead, fw-normal, text-muted) já conferem um visual profissional e moderno.

Conclusão: Sua Tabela de Preços Pronta com Bootstrap 5

Seguindo esses passos, é possível criar uma tabela de preços funcional, responsiva e esteticamente agradável de forma eficiente com HTML, CSS e Bootstrap 5. A modularidade do Bootstrap e suas classes utilitárias simplificam o processo, permitindo que desenvolvedores se concentrem na estrutura do conteúdo e na experiência do usuário. Este exemplo prático demonstra o poder do Bootstrap 5 para construir componentes web modernos rapidamente, sem a necessidade de escrever extensas folhas de estilo customizadas. Experimente e adapte este modelo às necessidades do seu projeto!