Tipografia
O Bootstrap define uma base tipográfica moderna e bem equilibrada, com espaçamentos consistentes e tamanhos otimizados. Além disso, oferece classes utilitárias para ajustar estilos rapidamente.
Tamanhos de Texto
<p class="fs-1">Texto tamanho 1 (maior)</p>
<p class="fs-2">Texto tamanho 2</p>
<p class="fs-3">Texto tamanho 3</p>
<p class="fs-4">Texto tamanho 4</p>
<p class="fs-5">Texto tamanho 5</p>
<p class="fs-6">Texto tamanho 6 (menor)</p>
As classes
fs-*controlam o tamanho da fonte de forma proporcional.
Peso e Estilo da Fonte
<p class="fw-bold">Texto em negrito</p>
<p class="fw-semibold">Seminegrito</p>
<p class="fw-normal">Peso normal</p>
<p class="fw-light">Peso leve</p>
<p class="fst-italic">Texto em itálico</p>
<p class="fst-normal">Texto sem itálico</p>
Alinhamento de Texto
<p class="text-start">Alinhado à esquerda</p>
<p class="text-center">Centralizado</p>
<p class="text-end">Alinhado à direita</p>
Transformação de Texto
<p class="text-uppercase">TEXTO EM MAIÚSCULAS</p>
<p class="text-lowercase">texto em minúsculas</p>
<p class="text-capitalize">primeira letra de cada palavra</p>
Bordas
O Bootstrap facilita a aplicação de bordas sem a necessidade de CSS adicional.
Aplicando Bordas
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Removendo Bordas
<div class="border-0">Sem borda</div>
Bordas em Lados Específicos
<div class="border-top">Borda apenas no topo</div>
<div class="border-start">Borda apenas na esquerda</div>
<div class="border-end">Borda apenas na direita</div>
<div class="border-bottom">Borda apenas na parte inferior</div>
Arredondamento de Bordas
<div class="rounded">Arredondamento padrão</div>
<div class="rounded-0">Sem arredondamento</div>
<div class="rounded-1">Canto levemente arredondado</div>
<div class="rounded-5">Canto extremamente arredondado</div>
<div class="rounded-circle">Formata em círculo</div>
<div class="rounded-pill">Formata em pílula (oval)</div>
Sombras
Aplicar sombras é extremamente simples no Bootstrap, perfeito para destacar cards, caixas e elementos.
Níveis de Sombra
<div class="shadow-none">Sem sombra</div>
<div class="shadow-sm">Sombra leve</div>
<div class="shadow">Sombra padrão</div>
<div class="shadow-lg">Sombra intensa</div>
As sombras ajudam a criar profundidade e separar visualmente os elementos do fundo, deixando o design mais limpo e profissional.
O uso inteligente de tipografia, bordas e sombras permite transformar estruturas simples em interfaces sofisticadas, visualmente organizadas e agradáveis.