Текст
Документация и примеры для обычных текстовых утилит для управления выравниванием, обертыванием, весом и многим другим.
Выравнивание текста
Выравнивайте текст в соответствии с обновляющимся выравниванием компонентов с помощью классов выравнивания.
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 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">Текст с выравниванием по левому краю для всех размеров области просмотра.</p>
<p class="text-center">Текст с выравниванием по центру на всех размерах области просмотра.</p>
<p class="text-right">Текст с выравниванием по правому краю для всех размеров области просмотра.</p>
<p class="text-sm-left">Выровненный по левому краю текст на размерных окнах просмотра SM (маленький) или шире.</p>
<p class="text-md-left">Выровненный по левому краю текст на размерных окнах просмотра MD (средний) или шире.</p>
<p class="text-lg-left">Выровненный по левому краю текст на размерных окнах просмотра LG (большой) или шире.</p>
<p class="text-xl-left">Выровненный по левому краю текст на размерных окнах просмотра XL (очень большой) или шире.</p>Перенос текста и переполнение
Обтекание текста классом .text-wrap.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
Этот текст следует обернуть.
</div>Запретить перенос текста с помощью класса .text-nowrap.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
Этот текст должен переполнять родительский.
</div>Для более длинного содержимого Вы можете добавить класс .text-truncate , чтобы обрезать текст многоточием. Требуется display: inline-block или display: block.
<!-- Блочный уровень -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Встроенный уровень -->
<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, чтобы избежать проблем с гибкими контейнерами.
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>Моноширинный текст (ширина каждого символа одинакова)
Измените выделение на наш моноширинный стек с помощью .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.
Приглушенный текст с ссылкой сброса.
<p class="text-muted">
Приглушенный текст с <a href="#" class="text-reset">ссылкой сброса</a>.
</p>Текстовое оформление
Удалите текстовое оформление с помощью класса .text-decoration-none.
<a href="#" class="text-decoration-none">Неподчеркнутая ссылка</a>