Teksti
Dokumentaatio ja esimerkkejä yleisistä tekstin apuohjelmista tasauksen, rivityksen, painon ja muiden ohjaamiseksi.
Tekstin tasaus
Tasaa teksti helposti komponenteiksi tekstin tasausluokkien avulla.
Paikkamerkkitekstiä, joka osoittaa tasaisen tekstin tasauksen. Teetkö saman minulle? On aika kohdata musiikki, en ole enää muusasi. Kuulin, että se on kaunista, ole tuomari ja tyttöni äänestävät. Tunnen sisälläni feeniksin. Taivas on kateellinen rakkaudestamme, enkelit itkevät ylhäältä. Kyllä, viet minut utopiaan.
<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>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.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Estä tekstin rivittäminen .text-nowrapluokassa.
<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.
<!-- 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>Sanan tauko
Estä pitkiä tekstijonoja rikkomasta komponenttien asettelua käyttämällä .text-breakasetuksia word-wrap: break-wordja word-break: break-word. Käytämme word-wrapyleisemmän sijasta overflow-wraplaajempaa selaintukea varten ja lisäämme vanhentuneen tilan word-break: break-wordvälttääksemme flex-säilöihin liittyviä ongelmia.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>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.
<a href="#" class="text-decoration-none">Non-underlined link</a>