Teksti

Dokumentaatio ja esimerkkejä yleisistä tekstin apuohjelmista tasauksen, rivityksen, painon ja muiden ohjaamiseksi.

Tekstin tasaus

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>

Tekstin rivitys ja ylivuoto

Kääri teksti .text-wrapluokalla.

Tämän tekstin pitäisi loppua.

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

Estä tekstin rivittäminen .text-nowrapluokassa.

Tämän tekstin tulisi ylittää vanhemman.

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

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>

Tekstin muunnos

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.

Fontin paino ja kursivoitu

Muuta nopeasti tekstin painoa (lihavointia) tai kursivoi teksti.

Lihavoitu teksti.

Lihavoitumpi teksti (suhteessa yläelementtiin).

Normaalipainoinen teksti.

Kevyt teksti.

Kevyempi teksti (suhteessa yläelementtiin).

Kursivoitu teksti.

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

Monospace

Muuta valinta monospace-fonttipinoksi käyttämällä .text-monospace.

Tämä on monoavaruudessa

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

Palauta väri

Palauta tekstin tai linkin väri .text-resetpainikkeella , jotta se perii värin vanhemmalta.

Mykistetty teksti nollauslinkillä .

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

Tekstin koristelu

Poista tekstikoristelu .text-decoration-noneluokalla.

Alleviivaamaton linkki

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