Перейти к основному содержанию Перейти к навигации по документам

Документация и примеры для управления текстом по выравниванию, переносу, трансформации текста и многиму другому.

Выравнивание текста

Легко выравнивайте текст в соответствии с выравниванием компонентов с помощью классов выравнивания. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки ширины окна просмотра, что и система сеток.

Выровненный слева текст для всех размеров видовых экранов.

Выровненный по центру текст для всех размеров видовых экранов.

Выровненный справа текст во всех размерах видового экрана.

Выровненный слева текст для экрана размера 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.

This text should wrap.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Предотвращайте оборачивания текста с помощью класса .text-nowrap.

This text should overflow the parent.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Разрыв слов

Запретите длинным строкам текста нарушать компоновку ваших компонентов, используя .text-break для установки word-wrap: break-word и word-break: break-word. Мы используем word-wrap вместо более распространенного overflow-wrap через переполнение для более широкой поддержки браузеров и добавляем устаревшее word-break: break-word, чтобы избежать проблем с гибкими контейнерами.

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-bolder">Жирный текст (относительно родительского элемента).</p>
<p class="font-weight-normal">Нормальная толщина текста.</p>
<p class="font-weight-light">Легкий текст.</p>
<p class="font-weight-lighter">Легкий текст (относительно родительского элемента).</p>
<p class="font-italic">Курсивный текст.</p>
<p class="font-normal">Текст без стиля шрифта.</p>

Высота строки

Измените высоту строки с помощью утилит .lh-*.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>

Моноширинный текст (ширина каждого символа одинакова)

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Это моноширинный текст

<p class="font-monospace">Это моноширинный текст</p>

Сброс цветов

Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя.

Неяркий текст с бесцветной ссылкой.

<p class="text-muted">
  Неяркий текст <a href="#" class="text-reset">с бесцветной ссылкой</a>.
</p>

Оформление текста

Украшайте текст в компонентах классами оформления текста.

Под этим текстом есть линия.

По этому тексту проходит линия.

Текстовое оформление этой ссылки удалено
<p class="text-decoration-underline">Под этим текстом есть линия.</p>
<p class="text-decoration-line-through">По этому тексту проходит линия.</p>
<a href="#" class="text-decoration-none">Оформление этой ссылки удалено</a>