Source

Тэкст

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

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

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

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

Гэты тэкст павінен перакрываць бацькоўскі.
<div class="text-nowrap" 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.
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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>