Тэкст
Дакументацыя і прыклады звычайных тэкставых утыліт для кіравання выраўноўваннем, абгортваннем, вагай і іншым.
Выраўноўванне тэксту
Лёгка выраўноўвайце тэкст па кампанентах з дапамогай класаў выраўноўвання тэксту.
Трохі тэксту-запаўняльніка для дэманстрацыі выраўноўвання тэксту па шырыні. Ты зробіш тое самае для мяне? Прыйшоў час сустрэцца з музыкай, я больш не твая муза. Чуў, што гэта прыгожа, будзьце суддзёй, і мае дзяўчынкі прагаласуюць. Я адчуваю ў сабе фенікса. Нябёсы зайздросцяць нашай любові, анёлы плачуць з вышыні. Так, ты вядзеш мяне ва ўтопію.
<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>Для выраўноўвання па левым, правым і цэнтральным баках даступныя адаптыўныя класы, якія выкарыстоўваюць тыя ж кропкі разрыву шырыні акна прагляду, што і сістэма сеткі.
Тэкст, выраўнаваны па левым краі, ва ўсіх памерах прагляду.
Выраўнаваны па цэнтры тэкст на ўсіх памерах прагляду.
Тэкст, выраўнаваны па правым краі, ва ўсіх памерах прагляду.
Выраўнаваны па левым краі тэкст у вокнах прагляду памерам SM (маленькі) або большы.
Выраўнаваны па левым краі тэкст у вокнах прагляду памерам MD (сярэдні) або шырэй.
Выраўнаваны па левым краі тэкст у вокнах прагляду памерам LG (вялікі) або шырэй.
Выраўнаваны па левым краі тэкст у вокнах прагляду памерам XL (вельмі вялікі) або шырэй.
<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>