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.

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

Ovaj tekst bi trebao biti preloman.

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

Spriječite prelamanje teksta s .text-nowrapklasom.

Ovaj tekst trebao bi prelaziti nadređeni.

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

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>

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.

Nepodcrtana poveznica

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