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

Spriječite prelamanje teksta s .text-nowrapklasom.

Ovaj tekst trebao bi prelaziti nadređeni.

<div class="text-nowrap" 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.

Tekst normalne težine.

Lagan tekst.

Kurziv teksta.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>