Текст
Документација и примери за уобичајене услужне програме за текст за контролу поравнања, премотавања, тежине и још много тога.
Поравнање текста
Лако поново поравнајте текст са компонентама помоћу класа за поравнање текста.
Неки текст чувара места за демонстрирање оправданог поравнања текста. Хоћеш ли учинити исто за мене? Време је да се суочиш са музиком. Нисам више твоја муза. Чуо сам да је прелепо, буди судија и моје девојке ће гласати. Осећам феникса у себи. Небо је љубоморно на нашу љубав, анђели плачу одозго. Да, водиш ме у утопију.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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то сет word-wrap: break-wordи word-break: break-word. Користимо word-wrapуместо уобичајенијег overflow-wrapза ширу подршку претраживача и додајемо застарели 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>