Teksti
Dokumentaatio ja esimerkkejä yleisistä tekstin apuohjelmista tasauksen, rivityksen, painon ja muiden ohjaamiseksi.
Tasaa teksti helposti komponenteiksi tekstin tasausluokkien avulla.
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>Vasemmalle, oikealle ja keskelle kohdistusta varten on saatavilla reagoivia luokkia, jotka käyttävät samoja näkymän leveyden keskeytyspisteitä kuin ruudukkojärjestelmä.
Vasemmalle tasattu teksti kaikissa näkymäkokoissa.
Keskitasattu teksti kaikissa näkymäkokoissa.
Oikealle tasattu teksti kaikissa näkymäkokoissa.
Vasemmalle tasattu teksti kuvaporteissa, joiden koko on SM (pieni) tai leveämpi.
Vasemmalle tasattu teksti MD (keskikoko) tai leveämmille kuvaporteille.
Vasemmalle tasattu teksti LG (suuri) tai sitä leveämmissä kuvaporteissa.
Vasemmalle tasattu teksti XL-kokoisissa (erittäin suurissa) tai leveämmissä kuvaporteissa.
<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>Estä tekstin rivittäminen .text-nowrapluokassa.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>Jos haluat pidempää sisältöä, voit lisätä .text-truncateluokan lyhentämään tekstiä ellipsillä. Vaatii display: inline-blocktai display: block.
<!-- 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>Muunna teksti komponenteiksi tekstin isojen kirjainten luokilla.
Pienet kirjaimet.
Teksti isoilla kirjaimilla.
Isokokoinen teksti.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Huomaa, että text-capitalizevain kunkin sanan ensimmäinen kirjain muuttuu, jolloin muiden kirjainten kirjainkoko ei vaikuta.
Muuta nopeasti tekstin painoa (lihavointia) tai kursivoi teksti.
Lihavoitu teksti.
Normaalipainoinen teksti.
Kevyt teksti.
Kursivoitu teksti.
<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>