Source

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.

Ovaj tekst bi trebao biti omotan.

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

Spriječite prelamanje teksta .text-nowrapklasom.

Ovaj tekst bi trebao prepuniti 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ćenje teksta trotočkom. 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 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.

Nepodvučeni link

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