Texto

Documentação e exemplos de utilitários de texto comuns para controlar alinhamento, quebra, peso e muito mais.

Alinhamento de texto

Realinhe facilmente o texto aos componentes com classes de alinhamento de texto.

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. Em 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 ao centro, estão disponíveis classes responsivas que usam os mesmos pontos de interrupção de largura da janela de visualização que o sistema de grade.

Texto alinhado à esquerda em todos os tamanhos de viewport.

Centralize o texto alinhado em todos os tamanhos de viewport.

Texto alinhado à direita em todos os tamanhos de viewport.

Texto alinhado à esquerda em viewports de tamanho SM (pequeno) ou maior.

Texto alinhado à esquerda em viewports de tamanho MD (médio) ou mais largo.

Texto alinhado à esquerda em viewports de tamanho LG (grande) ou maior.

Texto alinhado à esquerda em viewports de tamanho XL (extra-grande) ou mais largo.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Quebra de texto e estouro

Impedir que o texto seja agrupado com uma .text-nowrapclasse.

Este texto deve transbordar o pai.

<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

Para conteúdo mais longo, você pode adicionar uma .text-truncateclasse para truncar o texto com reticências. Requer display: inline-blockou display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

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

Transformação de texto

Transforme texto em componentes com classes de capitalização de texto.

Texto em minúsculas.

Texto em maiúsculas.

Texto capitulado.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Observe como text-capitalizealtera apenas a primeira letra de cada palavra, deixando as maiúsculas e minúsculas de quaisquer outras letras inalteradas.

Peso da fonte e itálico

Altere rapidamente o peso (negrito) do texto ou coloque o texto em itálico.

Texto em negrito.

Texto de peso normal.

Texto leve.

Texto em itálico.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>