Text

Documentació i exemples d'utilitats de text habituals per controlar l'alineació, l'ajustament, el pes i molt més.

Alineació del text

Realineu fàcilment el text als components amb classes d'alineació de text.

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

Per a l'alineació a l'esquerra, a la dreta i al centre, hi ha classes responsives disponibles que utilitzen els mateixos punts de ruptura d'amplada de la finestra gràfica que el sistema de quadrícula.

Text alineat a l'esquerra en totes les mides de finestra gràfica.

Centreu el text alineat a totes les mides de la finestra gràfica.

Text alineat a la dreta en totes les mides de la finestra gràfica.

Text alineat a l'esquerra en finestres de mida SM (petites) o més amples.

Text alineat a l'esquerra en finestres de mida MD (mitjana) o més amples.

Text alineat a l'esquerra a les finestres de mida LG (grans) o més amples.

Text alineat a l'esquerra en finestres de mida XL (extragrans) o més amples.

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

Embolcall i desbordament de text

Emboliqui el text amb una .text-wrapclasse.

Aquest text s'ha d'embolicar.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Eviteu que el text s'embolica amb una .text-nowrapclasse.

Aquest text hauria de desbordar els pares.

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

Per a contingut més llarg, podeu afegir una .text-truncateclasse per truncar el text amb punts suspensius. Requereix display: inline-blocko 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>

Salt de paraula

Eviteu que les llargues cadenes de text trenquin el disseny dels vostres components utilitzant .text-breakper configurar overflow-wrap: break-word(i word-break: break-wordper a la compatibilitat amb IE i Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Transformació de text

Transformeu text en components amb classes de majúscules de text.

Text en minúscula.

Text en majúscula.

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

Tingueu en compte com .text-capitalizenomés canvia la primera lletra de cada paraula, deixant sense afectar les majúscules i minúscules de les altres lletres.

Pes de la lletra i cursiva

Canvieu ràpidament el pes (negreta) del text o poseu-lo en cursiva.

Text en negreta.

Text en negreta (relatiu a l'element pare).

Text de pes normal.

Text lleuger.

Text més lleuger (relatiu a l'element principal).

Text en cursiva.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Monoespai

Canvieu una selecció a la nostra pila de tipus de lletra monoespai amb .text-monospace.

Això és en monoespai

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

Restableix el color

Restableix el color d'un text o d'un enllaç amb .text-reset, de manera que hereti el color del seu pare.

Text silenciat amb un enllaç de restabliment .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Decoració de text

Eliminar una decoració de text amb una .text-decoration-noneclasse.

Enllaç no subratllat

<a href="#" class="text-decoration-none">Non-underlined link</a>