Текст
Документация и примеры для обычных текстовых утилит для управления выравниванием, обертыванием, весом и тому подобное.
Выравнивание текста
Выравнивайте текст в соответствии с обновляющимся выравниванием компонентов с помощью классов выравнивания.
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>For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Выровненный слева текст для всех размеров видовых экранов.
Выровненный по центру текст для всех размеров видовых экранов.
Выровненный справа текст во всех размерах видового экрана.
Выровненный слева текст для экрана размера SM (small) или более широкого.
Выровненный слева текст для экрана размера MD (medium) или более широкого.
Выровненный слева текст для экрана размера LG (large) или более широкого.
Выровненный слева текст для экрана размера XL (extra-large) или более широкого.
<p class="text-left">Выровненный слева текст для всех размеров видовых экранов.</p>
<p class="text-center">Выровненный по центру текст для всех размеров видовых экранов.</p>
<p class="text-right">Выровненный справа текст во всех размерах видового экрана.</p>
<p class="text-sm-left">Выровненный слева текст для экрана размера SM (small) или более широкого.</p>
<p class="text-md-left">Выровненный слева текст для экрана размера MD (medium) или более широкого.</p>
<p class="text-lg-left">Выровненный слева текст для экрана размера LG (large) или более широкого.</p>
<p class="text-xl-left">Выровненный слева текст для экрана размера XL (extra-large) или более широкого.</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;">
Этот текст должен выходить за текст родительского элемента.
</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 для установки overflow-wrap: break-word (и word-break: break-word для совместимости с IE и Edge).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Трансформация текста
Трансформируйте текст в компонентах с помощью классов заглавных букв.
Текст в нижнем регистре.
Текст в верхнем регистре.
разноРеГиСТровый текст.
<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">разноРеГиСТровый текст.</p>Заметьте, что text-capitalize меняет лишь первую букву каждого слова, оставляя регистр других неизменным.
Жирность текста и курсив
Изменяйте толщину и курсивность текста.
Жирный текст.
Нормальный текст.
Легкий текст.
Курсивный текст.
<p class="font-weight-bold">Жирный текст.</p>
<p class="font-weight-normal">Нормальный текст.</p>
<p class="font-weight-light">Легкий текст.</p>
<p class="font-italic">Курсивный текст.</p>Моноширинный текст (ширина каждого символа одинакова)
Измените выделение на наш моноширинный стек с помощью .text-monospace.
Это моноширинный текст
<p class="text-monospace">Это моноширинный текст</p>Сброс цветов
Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя.
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
Muted text with a reset link.
<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>