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-wrapкласом.

Овај текст би требало да се умота. 
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

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

Овај текст би требало да пређе надређени. 
<div class="text-nowrap bd-highlight" 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>

Прелом речи

Спречите да дуги низови текста разбију изглед ваших компоненти користећи .text-breakто сет overflow-wrap: break-word(и word-break: break-wordза ИЕ & Едге компатибилност).

мммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

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

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

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

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

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

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

Моноспаце

Промените избор на наш моноспаце фонт са .text-monospace.

Ово је у монопростору

<p class="text-monospace">This is in monospace</p>

Ресетуј боју

Ресетујте боју текста или везе помоћу .text-reset, тако да наследи боју од свог родитеља.

Искључен текст са везом за ресетовање .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Декор��ција текста

Уклоните текстуални украс са .text-decoration-noneкласом.

Неподвучена веза 
<a href="#" class="text-decoration-none">Non-underlined link</a>