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