Тэкст

Дакументацыя і прыклады звычайных тэкставых утыліт для кіравання выраўноўваннем, абгортваннем, вагай і іншым.

Выраўноўванне тэксту

Лёгка выраўноўвайце тэкст па кампанентах з дапамогай класаў выраўноўвання тэксту.

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

Для выраўноўвання па левым, правым і цэнтральным баках даступныя адаптыўныя класы, якія выкарыстоўваюць тыя ж кропкі разрыву шырыні акна прагляду, што і сістэма сеткі.

Тэкст, выраўнаваны па левым краі, ва ўсіх памерах прагляду.

Выраўнаваны па цэнтры тэкст на ўсіх памерах прагляду.

Тэкст, выраўнаваны па правым краі, ва ўсіх памерах прагляду.

Выраўнаваны па левым краі тэкст у вокнах прагляду памерам 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.

Praeterea iter est quasdam res quas ex communi.

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