Tekst
Dokumentacija i primjeri uobičajenih tekstualnih uslužnih programa za kontrolu poravnanja, prelamanja, težine i više.
Poravnanje teksta
Jednostavno poravnajte tekst s komponentama pomoću klasa za poravnanje teksta.
Nešto rezerviranog teksta za demonstraciju opravdanog poravnanja teksta. Hoćeš li učiniti isto za mene? Vrijeme je da se suočiš s glazbom. Nisam ti više muza. Čuo sam da je lijepo, budi sudac i moje će djevojke glasati. Osjećam feniksa u sebi. Nebo je ljubomorno na našu ljubav, anđeli plaču odozgo. Da, vodiš me u utopiju.
<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>Za lijevo, desno i središnje poravnanje dostupne su responzivne klase koje koriste iste prijelomne točke širine prikaza kao i sustav rešetki.
Tekst poravnat ulijevo na svim veličinama okvira za prikaz.
Centrirano poravnati tekst na svim veličinama okvira za prikaz.
Desno poravnati tekst na svim veličinama okvira za prikaz.
Lijevo poravnati tekst na prozorima veličine SM (mali) ili širi.
Lijevo poravnati tekst na prozorima veličine MD (srednje) ili šire.
Lijevo poravnati tekst na prozorima veličine LG (veliki) ili širi.
Lijevo poravnati tekst na okvirima za prikaz veličine XL (iznimno veliki) ili širi.
<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>Prelamanje i prelijevanje teksta
Prelamanje teksta .text-wrapklasom.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Spriječite prelamanje teksta s .text-nowrapklasom.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Za duži sadržaj možete dodati .text-truncateklasu za skraćivanje teksta elipsom. Zahtijeva display: inline-blockili 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>Prijelom riječi
Spriječite duge nizove teksta da naruše raspored vaših komponenti pomoću .text-breakpostavki word-wrap: break-wordi word-break: break-word. Koristimo word-wrapumjesto uobičajenog overflow-wrapza širu podršku preglednika i dodajemo zastarjeli word-break: break-wordkako bismo izbjegli probleme s fleksibilnim spremnicima.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Transformacija teksta
Transformirajte tekst u komponentama s klasama velikih slova u tekstu.
Tekst ispisan malim slovima.
Tekst napisan velikim slovima.
Tekst pisan velikim slovima.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Imajte na umu kako .text-capitalizese mijenja samo prvo slovo svake riječi, ostavljajući velika i mala slova nepromijenjena.
Težina fonta i kurziv
Brzo promijenite težinu (podebljanost) teksta ili stavite tekst u kurziv.
Podebljan tekst.
Podebljani tekst (u odnosu na nadređeni element).
Tekst normalne težine.
Lagan tekst.
Lakši tekst (u odnosu na nadređeni element).
Kurziv teksta.
<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
Promijenite odabir u naš hrp monospace fontova pomoću .text-monospace.
Ovo je u monoprostoru
<p class="text-monospace">This is in monospace</p>Resetiraj boju
Poništite boju teksta ili veze pomoću .text-reset, tako da naslijedi boju od svog roditelja.
Prigušeni tekst s vezom za poništavanje .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekoracija teksta
Uklonite tekstualni ukras s .text-decoration-noneklasom.
<a href="#" class="text-decoration-none">Non-underlined link</a>