Cor e Tamanho de Texto com Bootstrap

Nesse post iremos aprender a como definir cor e tamanho de texto com Bootstrap de forma a alterar a aparência da página de acordo com nosso gosto.

O termo muito usado é estilizar e significa aplicar diferentes estilos, como fonte, tamanho, cor, negrito, itálico, sublinhado, etc., para tornar o texto visualmente mais atraente ou destacado. Quando coloquei o título desse post de “Cor e Tamanho de Texto com Bootstrap” quis dizer exatamente isso, dar diferentes estilos ou estilizar.

• Veja os outros posts sobre Bootstrap: posts sobre Bootstrap do site Categoria Outros.

Mas a estilização não está limitada apenas a cor e tamanho, inclui muito mais, como:

• alinhamento do texto
• transformação do texto, como maiúsculo, minúsculo e texto capitalizado(apenas primeira letra maiúscula).
• tipo de fonte(letra)

Podemos estilizar todo tipo de texto, seja apenas um parágrafo, títulos, subtítulos, listas etc…

Já vimos sobre cor de texto e de fundo(background) no post Coisas Importantes do Bootstrap para Iniciantes. Mas veremos novamente a respeito aqui 🙂

Temos outro post falando como adicionar Bootstrap dentro do HTML: O que é Bootstrap e como adicioná-lo no HTML

Cor do texto com Bootstrap

Podemos usar as seguintes classes do Bootstrap para darmos cor aos textos:

• text-primary: Texto na cor primária.
• text-secondary: Texto na cor secundária.
• text-success: Texto na cor de sucesso.
• text-danger: Texto na cor de perigo ou vermelho
• text-warning: Texto na cor de aviso. Um tipo de amarelado 🙂
• text-info: Texto na cor informativa.
• text-light: Texto em uma cor clara.
• text-dark: Texto em uma cor escura.
• text-body: Texto com a cor padrão do corpo do documento.
• text-muted: Texto em uma cor desbotada ou menos proeminente.

Então, podemos colocar, por exemplo, um título h1 em vermelho assim:

<h1 class="text-danger">Título Danger - Vemelhor</h1>

Estilo de Texto(Tamanho, negrito, itálico, sublinhado…) com Bootstrap

Estilo de texto engloba diversas aparências do texto, como tamanho, negrito, itálico, alinhamento e outras transformações.

Classes para tamanho de texto com Bootstrap

As classes de tamanho de texto disponíveis no Bootstrap são:

Classes pré-definidas

• text-xs: texto extra pequeno ou (8px)
• text-sm: texto pequeno ou (10px)
• text-md: texto médio ou (12px)
• text-lg: texto grande ou (14px)
• text-xl: texto extra grande ou (16px)
• text-xxl: extra grande ou (20px)

Classes de tamanho de texto padrão:

• x-small (8px)
• small (10px)
• medium (12px)
• large (14px)
• xlarge (16px)
• xxlarge (20px)

ou ainda podemos usar as classes para títulos .h1 à .h6

• h1
• h2
• h3
• h4
• h5
• h6

Todas as classes em Bootstrap têm um ponto(como em .medium ou .text-lg…) mas eu preferi não colocar já que no uso não o colocamos também.

Veja exemplo de uso:

<h1 class="h3">Título</h1>

<p class="h3">meu parágrafo com estilos</p>

Classes para estilo de texto com Bootstrap

Podemos dar estilos como,

• .font-weight-bold: Define o texto em negrito.
• .font-weight-normal: Define o texto com peso da fonte normal.
• .font-italic: Define o texto em itálico.
• .text-decoration-none: Remove a decoração de texto (como sublinhado).

Olha eu usado o ponto nas classes aqui! Essa é a forma correta de declarar as classes, mas quando for usar retire-os.

Classes para transformação de texto com Bootstrap

Podemos usar as classes para transformação de textos:

• .text-uppercase: Transforma o texto em maiúsculas.
• .text-lowercase: Transforma o texto em minúsculas.
• .text-capitalize: Capitaliza a primeira letra de cada palavra do texto.
• .text-nowrap: Impede a quebra de linha do texto.

Classes para Alinhamento de texto com Bootstrap

As classes para alinhamento de texto no Bootstrap são:

• text-left para alinhamento à esquerda
• text-center para alinhamento ao centro
• text-right para alinhamento à direita
• text-justify para justificado.