Texto

Documentación e exemplos de utilidades de texto comúns para controlar o aliñamento, o encaixe, o peso e moito máis.

Aliñación do texto

Realiñe facilmente o texto aos compoñentes con clases de aliñamento 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. 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 o aliñamento á esquerda, á dereita e ao centro, hai dispoñibles clases de resposta que usan os mesmos puntos de interrupción de ancho da vista que o sistema de grade.

Texto aliñado á esquerda en todos os tamaños de vistas.

Centrar o texto aliñado en todos os tamaños de vistas.

Texto aliñado á dereita en todos os tamaños de vistas.

Texto aliñado á esquerda en visores de tamaño SM (pequeno) ou máis anchos.

Texto aliñado á esquerda en visores de tamaño MD (mediano) ou máis anchos.

Texto aliñado á esquerda en visores de tamaño LG (grande) ou máis anchos.

Texto aliñado á esquerda en visores de tamaño XL (extragrande) ou máis anchos.

<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>

Axuste de texto e desbordamento

Evitar que o texto se axuste cunha .text-nowrapclase.

Este texto debería desbordar o pai.

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

Para contido máis longo, podes engadir unha .text-truncateclase para truncar o texto cun punto suspensivo. Require 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>

Transformación de texto

Transformar texto en compoñentes con clases de maiúsculas de texto.

Texto en minúscula.

Texto en maiúscula.

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

Teña en conta como text-capitalizesó cambia a primeira letra de cada palabra, deixando inalterado o caso de calquera outra letra.

Peso da letra e cursiva

Cambia rapidamente o peso (negriña) do texto ou pon o texto en cursiva.

Texto en negrita.

Texto de peso normal.

Texto lixeiro.

Texto en cursiva.

<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>

Monoespacial

Cambia unha selección á nosa pila de fontes monoespazo con .text-monospace.

Isto é en monoespazo

<p class="text-monospace">This is in monospace</p>