Source

Text

Documentație și exemple pentru utilitare de text obișnuite pentru a controla alinierea, împachetarea, greutatea și multe altele.

Alinierea textului

Realliniați cu ușurință textul la componente cu clase de aliniere a textului.

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>

Pentru alinierea la stânga, la dreapta și la centru, sunt disponibile clase receptive care utilizează aceleași puncte de întrerupere pentru lățimea ferestrei de vizualizare ca și sistemul de grilă.

Text aliniat la stânga pe toate dimensiunile ferestrelor de vizualizare.

Centrare textul aliniat pe toate dimensiunile ferestrelor de vizualizare.

Text aliniat la dreapta pe toate dimensiunile ferestrelor de vizualizare.

Text aliniat la stânga pe ferestrele de dimensiune SM (mic) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune MD (medie) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune LG (mari) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune XL (extra-mari) sau mai late.

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

Împachetare și depășire a textului

Preveniți încheierea textului cu o .text-nowrapclasă.

Acest text ar trebui să depășească părintele.

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

Pentru conținut mai lung, puteți adăuga o .text-truncateclasă pentru a trunchia textul cu puncte de suspensie. Necesită display: inline-blocksau 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>

Transformarea textului

Transformați textul în componente cu clase de scriere cu majuscule.

Text cu litere mici.

Text cu majuscule.

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

Observați cum text-capitalizese schimbă doar prima literă a fiecărui cuvânt, lăsând neafectat litera majusculei altor litere.

Greutatea fontului și caracterele cursive

Schimbați rapid greutatea (îndrăzneala) textului sau scrieți cu italice.

Text îngroșat.

Text cu greutate normală.

Text ușor.

Text italic.

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