Bootstrap: Tipografia
Última atualização: 2026-08-26
1. Visão Geral da Lição
(1) Pré-requisitos
- Dominar as diferenças e a escolha dos três tipos de container (da Lição 2).
- Compreender as mudanças de largura responsiva do
.container.
(2) 🎯 O Que Você Vai Aprender
- Dominar o sistema de títulos do Bootstrap (
h1~h6) e os display headings. - Aprender a usar
.leadpara parágrafos de guia e elementos de texto inline. - Dominar as utilidades de cor de texto
.text-*e o controle de opacidade. - Usar com proficiência as classes utilitárias de alinhamento, transformação e tamanho de fonte.
- Criar sozinho um layout completo de postagem de blog.
(3) Pontos de Dor
Charlie acabou de assumir um projeto de blog que exige estilos de título consistentes e espaçamento de parágrafos em páginas diferentes. Se usasse CSS puro, precisaria escrever seletores para cada página e se preocupar com conflitos de prioridade.
(4) Solução
As classes de tipografia do Bootstrap tornam isso simples. O Bootstrap oferece um conjunto completo de estilos de tipografia — do tamanho da fonte à altura da linha, das cores de texto ao espaçamento — tudo pré-configurado; você só precisa usar as classes apropriadas.
Entendimento: A Tipografia do Bootstrap é como o painel de Estilos do Word — selecione "Título 1" e o texto automaticamente fica em negrito e maior, sem ajustar manualmente o tamanho da fonte ou o espaçamento das linhas.
(5) Benefícios
Ao adicionar as classes de tipografia correspondentes no HTML, Charlie pode manter estilos de título e espaçamento de parágrafos consistentes em todas as páginas do blog sem escrever nenhum código CSS personalizado.
2. Títulos
▶ Exemplo: Títulos e Display Headings
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tipografia Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<!-- Títulos padrão -->
<h1>h1. Título Bootstrap</h1>
<h2>h2. Título Bootstrap</h2>
<h3>h3. Título Bootstrap</h3>
<h4>h4. Título Bootstrap</h4>
<h5>h5. Título Bootstrap</h5>
<h6>h6. Título Bootstrap</h6>
<hr>
<!-- Classes de título em qualquer elemento -->
<p class="h1">Este parágrafo parece um h1</p>
<p class="h2">Este parágrafo parece um h2</p>
<p class="h3">Este parágrafo parece um h3</p>
<hr>
<!-- Display headings (extra-grandes) -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
</body>
</html>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
(1) Tamanhos de Fonte Padrão
| Nível | Tag/Classe | Tamanho da Fonte | Peso |
|---|---|---|---|
h1 |
<h1> |
2.5rem (40px) | 500 |
h2 |
<h2> |
2rem (32px) | 500 |
h3 |
<h3> |
1.75rem (28px) | 500 |
h4 |
<h4> |
1.5rem (24px) | 500 |
h5 |
<h5> |
1.25rem (20px) | 500 |
h6 |
<h6> |
1rem (16px) | 500 |
3. Display Headings
display-1 ~ display-6 são maiores e mais finos (font-weight: 300) do que os títulos padrão, adequados para títulos de home page, slogans de marca e outras áreas que exigem impacto visual:
<h1 class="display-3">Construa <span class="text-primary">rápido</span> com Bootstrap</h1>
<p class="lead">Um kit de ferramentas front-end poderoso e cheio de recursos.</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
| Classe | Tamanho da Fonte | Peso | Cenário de Aplicação |
|---|---|---|---|
display-1 |
5rem | 300 | Título Hero da Home Page |
display-3 |
4rem | 300 | Título de Landing Page |
display-6 |
2.5rem | 300 | Banner de Página Interna |
(2) Comparação de Todos os Display Headings
| Classe | Tamanho da Fonte | Altura da Linha | font-weight | Cenário de Aplicação |
|---|---|---|---|---|
display-1 |
5rem (80px) | 1.2 | 300 (Light) | Título Hero da Home Page |
display-2 |
4.5rem (72px) | 1.2 | 300 (Light) | Título Principal de Landing Page |
display-3 |
4rem (64px) | 1.2 | 300 (Light) | Slogan de Marca |
display-4 |
3.5rem (56px) | 1.2 | 300 (Light) | Título de Página de Evento |
display-5 |
3rem (48px) | 1.2 | 300 (Light) | Banner de Página Interna |
display-6 |
2.5rem (40px) | 1.2 | 300 (Light) | Título de Seção |
graph TD
A[Sistema de Tipografia Bootstrap] --> B[Títulos h1~h6]
A --> C[Display Headings display-1~6]
A --> D[Parágrafos Lead .lead]
A --> E[Elementos Inline]
A --> F[Classes Utilitárias]
B --> G[Tags de Título Padrão]
B --> H[classe h1 Simulando Títulos]
E --> I[mark / del / ins / small]
E --> J[strong / em / u / s]
F --> K[Cores de Texto text-*]
F --> L[Alinhamento de Texto text-start/center/end]
F --> M[Transformação de Texto uppercase/lowercase/capitalize]
F --> N[Tamanho de Fonte fs-1~fs-6]
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
4. Parágrafos de Destaque (Lead)
.lead torna os parágrafos maiores e mais proeminentes, adequado para introduções de artigos ou texto enfatizado:
<p>Este é um parágrafo normal com tamanho de fonte padrão (1rem).</p>
<p class="lead">Este é um parágrafo de destaque. Ele se destaca do conteúdo regular com fonte maior e peso mais leve.</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
5. Elementos de Texto Inline
O Bootstrap redefine estilos para tags HTML inline comuns, prontas para uso imediato:
<p>Você pode <mark>destacar</mark> texto com a tag mark.</p>
<p><del>Este texto está excluído.</del></p>
<p><s>Este texto não é mais preciso.</s></p>
<p><ins>Este texto foi recém-inserido.</ins></p>
<p><u>Este texto está sublinhado.</u></p>
<p><small>Este texto é pequeno.</small></p>
<p><strong>Este texto está em negrito.</strong></p>
<p><em>Este texto está em itálico.</em></p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
| Tag | Efeito | Uso |
|---|---|---|
<mark> |
Realce com fundo amarelo | Palavras-chave / Resultados de Busca |
<del> |
Tachado | Conteúdo Excluído |
<ins> |
Sublinhado (tipicamente verde) | Conteúdo Novo |
<small> |
Texto pequeno 0.875em | Anotações / Rodapé |
<strong> |
Negrito | Ênfase em Palavra-chave |
6. Cores de Texto
▶ Exemplo: Cores de Texto
<p class="text-primary">.text-primary - Azul primário</p>
<p class="text-success">.text-success - Verde de sucesso</p>
<p class="text-danger">.text-danger - Vermelho de perigo</p>
<p class="text-warning bg-dark p-2">.text-warning - Âmbar de aviso</p>
<p class="text-info bg-dark p-2">.text-info - Ciano de informação</p>
<p class="text-muted">.text-muted - Cinza esmaecido</p>
<p class="text-dark">.text-dark - Texto escuro</p>
<p class="text-body">.text-body - Cor padrão do corpo</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
Opacidade de Texto (Bootstrap 5.3):
<p class="text-primary">Opacidade 100%</p>
<p class="text-primary text-opacity-75">Opacidade 75%</p>
<p class="text-primary text-opacity-50">Opacidade 50%</p>
<p class="text-primary text-opacity-25">Opacidade 25%</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
7. Alinhamento de Texto
<p class="text-start">Alinhado à esquerda em todas as viewports.</p>
<p class="text-center">Centralizado em todas as viewports.</p>
<p class="text-end">Alinhado à direita em todas as viewports.</p>
<p class="text-sm-end">Alinhado à direita em sm+ viewports.</p>
<p class="text-md-center">Centralizado em md+ viewports.</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
Os sufixos de breakpoint sm/md/lg/xl/xxl também são eficazes no alinhamento de texto.
8. Transformação de Texto e Tamanho de Fonte
<p class="text-lowercase">Texto Minúsculo</p>
<p class="text-uppercase">TEXTO MAIÚSCULO</p>
<p class="text-capitalize">texto capitalizado</p>
<p class="fs-1">fs-1 - font-size: 2.5rem</p>
<p class="fs-2">fs-2 - font-size: 2rem</p>
<p class="fs-3">fs-3 - font-size: 1.75rem</p>
<p class="fs-4">fs-4 - font-size: 1.5rem</p>
<p class="fs-5">fs-5 - font-size: 1.25rem</p>
<p class="fs-6">fs-6 - font-size: 1rem</p>
Output: Componentes estilizados do Bootstrap 5.3 (como botões, cards, carrosséis, collapses) com a página usando o tema padrão do Bootstrap (modo claro) e a grade responsiva.
| Classe | Propriedade CSS | Equivalente |
|---|---|---|
text-lowercase |
text-transform: lowercase |
Todas as letras minúsculas |
text-uppercase |
text-transform: uppercase |
Todas as letras maiúsculas |
text-capitalize |
text-transform: capitalize |
Primeira letra de cada palavra maiúscula |
9. Listas e Citações
O Bootstrap reestiliza listas e citações para que o HTML semântico pareça limpo sem CSS personalizado.
▶ Exemplo: Listas e Citações
<ul class="list-unstyled">
<li>Item não estilizado um</li>
<li>Item não estilizado dois</li>
</ul>
<ol class="list-group list-group-numbered">
<li class="list-group-item">Passo um</li>
<li class="list-group-item">Passo dois</li>
</ol>
<blockquote class="blockquote">
<p>O Bootstrap torna a tipografia sem esforço.</p>
<footer class="blockquote-footer">Um desenvolvedor feliz</footer>
</blockquote>
Output: A lista não estilizada remove os marcadores; a lista numerada list-group é renderizada como uma lista de cards com borda e numerada; a blockquote recebe um estilo de citação grande alinhada à esquerda.
❓ Perguntas Frequentes
P: Posso misturar display headings com títulos normais? R: Sim. Os display headings (
display-1adisplay-6) apenas ampliam o tamanho da fonte e o peso mais leve; você pode usá-los em qualquer nível de título sem alterar a estrutura do documento.
P: Por que minha classe de cor de texto inline não funciona? R: As utilidades de cor de texto inline como
text-mutedoutext-dangeraplicam-se a nós de texto. Se o elemento for sobrescrito por uma regra CSS mais específica, adicione a classe utilitária ao elemento de texto exato em vez de ao pai.
P:
text-capitalizecapitaliza cada palavra? R: Não. Ele apenas capitaliza a primeira letra de cada palavra, mantendo o resto inalterado. Não corrige ortografia nem muda letras maiúsculas para minúsculas.
📖 Resumo
- A tipografia do Bootstrap cobre títulos, display headings, parágrafos, texto inline, alinhamento, transformação, tamanho de fonte, listas e citações.
- Classes utilitárias (
text-*,fs-*,display-*,list-*,blockquote) estilizam texto sem escrever CSS personalizado. - Sufixos de breakpoint (
sm/md/lg/xl/xxl) funcionam em utilidades de alinhamento e transformação para texto responsivo.
📝 Exercícios
- Crie uma página com um título
<h1 class="display-1">e um subtítulo normal<h3>, e compare seus pesos visuais. - Use
text-uppercase,text-mutedetext-centerem três parágrafos e observe o efeito combinado. - Construa uma lista
list-group-numberedcom seus três frameworks favoritos e envolva uma citação sobre um deles em umblockquote.
