Tekst
Dokumentacija i primjeri uobičajenih tekstualnih uslužnih programa za kontrolu poravnanja, prelamanja, težine i još mnogo toga.
Poravnanje teksta
Lako poravnajte tekst sa komponentama pomoću klasa poravnanja teksta.
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>Za poravnanje lijevo, desno i po sredini, dostupne su responzivne klase koje koriste iste granične tačke širine prikaza kao i sistem mreže.
Lijevo poravnat tekst na svim veličinama okvira za prikaz.
Centrirano poravnat tekst na svim veličinama okvira za prikaz.
Desno poravnat tekst na svim veličinama okvira za prikaz.
Lijevo poravnat tekst na okvirima za prikaz veličine SM (mali) ili širi.
Lijevo poravnat tekst na okvirima za prikaz veličine MD (srednje) ili šire.
Lijevo poravnat tekst na okvirima za prikaz veličine LG (veliki) ili širi.
Lijevo poravnat tekst na prozorima veličine XL (ekstra-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 teksta i prelijevanje
Prelomi tekst .text-wrapklasom.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Spriječite prelamanje teksta .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ćenje teksta trotočkom. 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>Pauza riječi
Spriječite duge nizove teksta da razbiju izgled vaših komponenti pomoću .text-breakza postavljanje word-wrap: break-wordi word-break: break-word. Koristimo word-wrapumjesto uobičajenijeg overflow-wrapza širu podršku pretraživača i dodajemo zastarjeli word-break: break-wordkako bismo izbjegli probleme sa flex kontejnerima.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Transformacija teksta
Transformirajte tekst u komponente sa klasama velikih slova.
Tekst malim slovima.
Tekst velikim slovima.
Veliki tekst.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Obratite pažnju na to kako .text-capitalizese mijenja samo prvo slovo svake riječi, ostavljajući velika i mala slova bez utjecaja.
Težina fonta i kurziv
Brzo promijenite težinu (podebljanost) teksta ili iscrtajte tekst u kurzivu.
Bold text.
Podebljani tekst težine (u odnosu na roditeljski element).
Tekst normalne težine.
Lagan tekst.
Lakši tekst (u odnosu na roditeljski element).
Kurziv tekst.
<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š skup jednorazrednih fontova pomoću .text-monospace.
Ovo je u monoprostoru
<p class="text-monospace">This is in monospace</p>Resetuj boju
Poništite boju teksta ili veze pomoću .text-reset, tako da naslijedi boju od svog roditelja.
Isključen tekst sa linkom za resetovanje .
<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>