Текст
Документација и примери за уобичајене услужне програме за текст за контролу поравнања, премотавања, тежине и још много тога.
Лако поново поравнајте текст са компонентама помоћу класа за поравнање текста.
Амбитиони дедиссе сцрипсиссе иудицаретур. Црас маттис иудициум пурус сит амет ферментум. Донец сед одио операе, еу вулпутате фелис рхонцус. Праетереа итер ест куасдам рес куас ек цоммуни. Ат нос хинц постхац, ситиентис пирос Афрос. Петиерунт ути сиби цонцилиум тотиус Галлиае ин дием цертам индицере. Црас маттис иудициум пурус сит амет ферментум.
<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>