Tekst

Dokumentatsioon ja näited tavapäraste tekstiutiliitide jaoks, et juhtida joondamist, mähkimist, kaalu ja palju muud.

Teksti joondamine

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil.

Mõni kohatäidetekst, et näidata teksti õigustatud joondust. Kas teete sama minu jaoks? On aeg silmitsi seista muusikaga, et ma pole enam sinu muusa. Kuulsin, et see on ilus, ole kohtunik ja mu tüdrukud hääletavad. Ma tunnen enda sees fööniksit. Taevas on armukade meie armastuse peale, inglid nutavad ülevalt. Jah, sa viid mind utoopiasse.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

Vasakule, paremale ja keskele joondamiseks on saadaval reageerivad klassid, mis kasutavad samu vaateava laiuse katkestuspunkte kui ruudustikusüsteem.

Vasakule joondatud tekst kõigis vaateava suurustes.

Keskele joondatud tekst kõigis vaateava suurustes.

Paremale joondatud tekst kõigis vaateava suurustes.

Vasakule joondatud tekst vaateavadel, mille suurus on SM (väike) või laiem.

Vasakule joondatud tekst vaateavadel, mille suurus on MD (keskmine) või laiem.

Vasakule joondatud tekst LG (suur) või laiemate vaateavade puhul.

Vasakule joondatud tekst XL (eriti suur) või laiemates vaateavades.

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

Teksti murdmine ja ületäitumine

Teksti murdmine .text-wrapklassiga.

See tekst peaks katkema.

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

.text-nowrapVältige klassiga teksti murdmist .

See tekst peaks üle vanema.

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

Pikema sisu jaoks saate lisada .text-truncateklassi, mis kärbib teksti ellipsiga. Nõuab display: inline-blockvõi 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>

Sõna murd

Vältige pikkadel tekstistringidel komponentide paigutust rikkumast, kasutades .text-breakseadistusi word-wrap: break-wordja word-break: break-word. Laiema brauseri toe jaoks kasutame word-wraptavalisema asemel ja lisame aegunud , et vältida probleeme paindlike konteineritega.overflow-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Teksti teisendus

Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.

Väiketähtedega tekst.

Suurtähtedega tekst.

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

Pange tähele, kuidas .text-capitalizemuudab ainult iga sõna esimest tähte, jättes muude tähtede suur- ja väiketähtede muutmata.

Fondi kaal ja kaldkiri

Muutke kiiresti teksti kaalu (paksust) või muutke tekst kaldkirja.

Paks tekst.

Paksem kaal tekst (võrreldes põhielemendiga).

Normaalse kaaluga tekst.

Kerge tekst.

Kergema kaaluga tekst (suhtes põhielemendiga).

Kaldkiri.

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

Monoruum

Muutke valik meie monospace'i fondivirnaks, kasutades .text-monospace.

See on monoruumis

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

Lähtesta värv

Lähtestage teksti või lingi värv nupuga .text-reset, nii et see pärib värvi oma emalt.

Vaigistatud tekst lähtestamislingiga .

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

Teksti kaunistamine

.text-decoration-noneEemaldage klassiga tekstikaunistus .

Allajoonimata link

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