Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.
Выравнивание текста
Легко выравнивайте текст по компонентам с помощью классов выравнивания текста.
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>Преобразование текста
Преобразование текста в компонентах с помощью классов капитализации текста.
Текст в нижнем регистре.
Текст в верхнем регистре.
CapiTaliZed текст.
<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">CapiTaliZed текст.</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, чтобы он унаследовал цвет от своего родителя.
Приглушенный текст с ссылкой сброса.
<p class="text-muted">
Приглушенный текст с <a href="#" class="text-reset">ссылкой сброса</a>.
</p>Оформление текста
Удалите оформление текста с помощью класса .text-decoration-none.
<a href="#" class="text-decoration-none">Неподчеркнутая ссылка</a>