Tekstas

Įprastų teksto paslaugų, skirtų lygiavimui, vyniojimui, svoriui ir kt. valdyti, dokumentacija ir pavyzdžiai.

Teksto lygiavimas

Lengvai suderinkite tekstą su komponentais naudodami teksto lygiavimo klases.

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>

Lygiavimui kairėje, dešinėje ir centre galimos reaguojančios klasės, kuriose naudojami tie patys peržiūros srities pločio taškai, kaip ir tinklelio sistemoje.

Tekstas sulygiuotas kairėje visų dydžių peržiūros srityje.

Visų dydžių peržiūros srities tekstas sulygiuotas centre.

Dešinėje sulygiuotas tekstas visų dydžių peržiūros srityje.

Kairėje sulygiuotas tekstas peržiūros srityse, kurių dydis yra SM (mažas) arba didesnis.

Kairėje sulygiuotas tekstas MD (vidutinio) arba platesnėse peržiūros srityse.

Kairėje sulygiuotas tekstas LG (didelės) arba platesnėse peržiūros srityse.

Kairėje sulygiuotas tekstas XL (ypač didelės) arba platesnėse peržiūros srityse.

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

Teksto vyniojimas ir perpildymas

Neleiskite tekstui įvynioti naudojant .text-nowrapklasę.

Šis tekstas turėtų perpildyti tėvą.

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

Jei norite ilgesnio turinio, galite pridėti .text-truncateklasę, kad tekstas būtų sutrumpintas elipsės ženklu. Reikia display: inline-blockarba 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>

Teksto transformacija

Transformuokite tekstą į komponentus naudodami didžiųjų raidžių rašymo klases.

Tekstas mažosiomis raidėmis.

Tekstas didžiosiomis raidėmis.

Didžiosiomis raidėmis rašomas tekstas.

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

Atkreipkite dėmesį, kaip text-capitalizepakeičiama tik pirmoji kiekvieno žodžio raidė, o kitų raidžių didžiosios ir mažosios raidės nepaveikiamos.

Šrifto svoris ir kursyvas

Greitai pakeiskite teksto svorį (paryškinimą) arba kursyvą.

Paryškintas tekstas.

Normalaus svorio tekstas.

Lengvas tekstas.

Kursyvas tekstas.

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