Texto

Documentação e exemplos de utilitários de texto comuns para controle de alinhamento, quebra de linha, espessura, etc.

Alinhamento de texto

Facilmente, alinhe texto de componentes com as classes de alinhamento.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

Para alinhamento à esquerda, direita e centralizado, existem classes responsivas que usam os mesmos breakpoints que o sistema de grid.

Alinhado à esquerda, em todos tamanhos de viewport.

Centralizado, em todos tamanhos de viewport.

Alinhado à direita, em todos tamanhos de viewport.

Alinhado à esquerda, em viewports com tamanho SM (pequenas) ou maior.

Alinhado à esquerda, em viewports com tamanho MD (médias) ou maior.

Alinhado à esquerda, em viewports com tamanho LG (grandes) ou maior.

Alinhado à esquerda, em viewports com tamanho XL (extra-grandes) ou maior.

<p class="text-left">Alinhado à esquerda, em todos tamanhos de viewport.</p>
<p class="text-center">Centralizado, em todos tamanhos de viewport.</p>
<p class="text-right">Alinhado à direita, em todos tamanhos de viewport.</p>

<p class="text-sm-left">Alinhado à esquerda, em viewports com tamanho SM (pequenas) ou maior.</p>
<p class="text-md-left">Alinhado à esquerda, em viewports com tamanho MD (médias) ou maior.</p>
<p class="text-lg-left">Alinhado à esquerda, em viewports com tamanho LG (grandes) ou maior.</p>
<p class="text-xl-left">Alinhado à esquerda, em viewports com tamanho XL (extra-grandes) ou maior.</p>

Quebra e transbordamento de texto

Evite que o texto quebre, usando a classe .text-nowrap.

Este texto está transbordando o elemento pai.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  Este texto está transbordando o elemento pai.
</div>

Para conteúdos longos demais, você pode usar a classe .text-truncate para reduzir o texto com reticências. Requer o uso de display: inline-block ou display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- Elemento com `diplay: block;` -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Elemento com `diplay: inline;` -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Text transform

Tranforme textos com as seguintes classes:

TEXTO EM LETRAS MINÚSCULAS.

Texto em letras maiúsculas.

texto capitalizado.

<p class="text-lowercase">TEXTO EM LETRAS MINÚSCULAS.</p>
<p class="text-uppercase">Texto em letras maiúsculas.</p>
<p class="text-capitalize">texto capitalizado.</p>

Perceba que text-capitalize apenas altera a primeira letra de cada palavra.

Espessura e italização de fontes

Rapidamente, modifique a espessura do texto ou italicize-o.

Texto grosso.

Texto de espessura comum.

Texto de espessura leve.

Texto itálico.

<p class="font-weight-bold">Texto grosso.</p>
<p class="font-weight-normal">Texto de espessura comum.</p>
<p class="font-weight-light">Texto de espessura leve.</p>
<p class="font-italic">Texto itálico.</p>

Monospace

Use nossa fonte monospace, usando a classe .text-monospace.

Este é um texto com fonte monospace.

<p class="text-monospace">Este é um texto com fonte monospace.</p>