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

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

Aquest text hauria de desbordar els pares.

<div class="text-nowrap" 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>

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 de pes normal.

Text lleuger.

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