Source

Текст

Документација и примери за уобичајене услужне програме за текст за контролу поравнања, премотавања, тежине и још много тога.

Поравнање текста

Лако поново поравнајте текст са компонентама помоћу класа за поравнање текста.

Амбитиони дедиссе сцрипсиссе иудицаретур. Црас маттис иудициум пурус сит амет ферментум. Донец сед одио операе, еу вулпутате фелис ​​рхонцус. Праетереа итер ест куасдам рес куас ек цоммуни. Ат нос хинц постхац, ситиентис пирос Афрос. Петиерунт ути сиби цонцилиум тотиус Галлиае ин дием цертам индицере. Црас маттис иудициум пурус сит амет ферментум.

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

За поравнање лево, десно и по средини, доступне су прилагодљиве класе које користе исте преломне тачке ширине приказа као и систем мреже.

Лево поравнат текст на свим величинама прозора.

Центрирано поравнат текст на свим величинама прозора.

Десно поравнат текст на свим величинама прозора.

Лево поравнат текст на прозорима величине СМ (мали) или шири.

Лево поравнат текст на оквирима за приказ величине МД (средње) или шире.

Лево поравнат текст на прозорима величине ЛГ (велики) или шири.

Лево поравнат текст на прозорима величине КСЛ (екстра-велики) или шири.

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

Преламање текста и преливање

Спречите преламање текста .text-nowrapкласом.

Овај текст би требало да пређе надређени.
<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

За дужи садржај, можете додати .text-truncateкласу за скраћење текста троточком. Захтева display: inline-blockили 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>

Трансформација текста

Трансформишите текст у компоненте са класама великих слова.

Текст малим словима.

Текст великим словима.

Велики текст.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Обратите пажњу на то како text-capitalizeсе мења само прво слово сваке речи, остављајући велика и мала слова без утицаја.

Тежина фонта и курзив

Брзо промените тежину (подебљаност) текста или исцртајте текст у курзиву.

Задебљани текст.

Текст нормалне тежине.

Лагани текст.

Курзив текст.

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