Alinhamento
.text-start
Texto de parágrafo alinhado à esquerda (valor CSS inicial)
.text-center
Texto de parágrafo alinhado no centro
.text-end
Texto de parágrafo alinhado à direita
text-center text-md-end text-lg-start
Texto de parágrafo alinhado segundo a viewport
Capitalização
.text-lowercase
TeXto Com toDas as Letras MINúsculas
.text-uppercase
teXto Com toDas as letras MAiúsculaS
.text-capitalize
texto cOm primeiRA leTRa de cada paLavra em maiúscUla
Nota: na marcação HTML dos textos desse exemplo misturamos de propósito as letras, usando aleatóriamnete maiúscula e minúscula. Examine a marcação dos textos, compare com a respectiva renderização e conclua. O efeito é próprio das CSS e não do Bootstrap.
Tamanho de fonte
.fs-1 (2.5rem)
Texto de parágrafo
.fs-2 (2rem)
Texto de parágrafo
.fs-3 (1.75rem)
Texto de parágrafo
.fs-4 (1.5rem)
Texto de parágrafo
.fs-5 (1.25rem)
Texto de parágrafo
.fs-6 (1rem)
Texto de parágrafo
Negrito
Itálico
.fw-bold
Texto de parágrafo
.fw-bolder
Texto de parágrafo
.fw-semi-bold
Texto de parágrafo
.fw-normal
Texto de parágrafo
.fw-light
Texto de parágrafo
.fw-lighter
Texto de parágrafo
.fst-italic
Texto itálico
.fst-normal
Texto normal
Nota: Os valor bolder e lighter têm seu negrito relativo ao elemento-pai, ou seja, uma gradação a mais que o negrito do elemento-pai.
Texto decorado
.text-decoration-underline
Texto decorado com sublinhado
.text-decoration-line-through
Texto decorado com linha sobre
Quebra de texto e overflow
.text-wrap
Texto de um container com largura fixa e fundo colorido
.text-nowrap
Texto de um container com largura fixa e fundo colorido
Quebra de palavras
.text-break
essaéumapalavramuitograndeloremipsumdolorsitametconsecteturadipisicingelitdiooditlaboriosammaximecorruptisuscipitnullalaborumaccusantiumfugadoloresobcaecatiestsolutadoloremqueaperiamarchitectoaliasrepellendusadipsamnecessitatibus.
Fonte monoespaçada
.font-monospace
O texto desse parágrafo é com fonte monoespaçada padrão do framework Bootstrap.
Reset de cor
.text-reset
Link dentro de um parágrafo herdando a cor do parágrafo
Link dentro de um parágrafo da laraja herdando a cor do parágrafo
Blockquote
.blockquote e .blockquote-footer
O maior inimigo do conhecimento não é a ignorância, é a ilusão do conhecimento.
Lista inline
.list-inline e .list-inline-item
- Item #1.
- Item #2.
- Item #3.
Opacidade em textos
sem classe de opacidade
Texto com opacidade igual a 75%
.text-opacity-75
Texto com opacidade igual a 75%
.text-opacity-50
Texto com opacidade igual a 50%
.text-opacity-25
Texto com opacidade igual a 25%