Выравнивание текста в таблице Bootstrap: классы и методы

Быстрый ответ

Для настройки выравнивания текста в таблице, созданной с помощью Bootstrap, входящие в его состав классы text-left, text-center и text-right следует располагать непосредственно в элементах <td> или <th>.

Пример использования, позволяющий быстро получить желаемый результат:

<tr>
  <td class="text-left">Влево</td>
  <td class="text-center">По центру</td>
  <td class="text-right">Вправо</td>
</tr>

Применение данных классов обеспечивает выравнивание текста слева, по центру или справа в ячейках.

Приспосабливаемся к обновлениям Bootstrap 5

В Bootstrap 5 классы text-start и text-end заменяют, соответственно, text-left и text-right. Такое обновление оптимизировано в контексте языков, написание которых ведется справа налево. Их нужно использовать следующим образом:

<!-- Современный способ выравнивания -->
<td class="text-start">Текст начинается здесь</td>
<td class="text-end">Текст заканчивается тут</td>

Разработка адаптивного дизайна с использованием Bootstrap

Адаптивный дизайн играет важную роль в обеспечении комфортного пользовательского опыта. С Bootstrap 4 доступны классы вида text-sm-right, предоставляющие удобство создания адаптивного выравнивания текста. Пример их применения:

<!-- Уверенное адаптирование к разнообразным размерам экрана -->
<td class="text-right text-sm-left">Компактно на малых экранах, эстетично на больших</td>

Данный код обеспечивает выравнивание текста вправо на больших экранах и автоматическое изменение расположения влево на устройствах меньшего размера.

Самостоятельное внесение коррективов в выравнивание в таблицах

Если Bootstrap не полностью удовлетворяет ваши требования, вы можете использовать собственные CSS-классы для достижения уровня контроля и простоты восприятия, удовлетворяющего вас. можно создавать классы с семантической ролью типа .price-label или .price-value и задавать для них text-align: right:

/* Одним из примеров использования может прислужить банковская выписка */
.price-value {
  text-align: right;
}

Модификация стандартных стилей bootstrap

Если возможностей стандартных утилит оказывается недостаточно, вы можете предпринять переопределение стандартных стилей bootstrap, убедившись в том, что ваш файл стилей подключается после файла bootstrap.css. В определенных случаях может потребоваться применение !important, чтобы подчеркнуть приоритет вашего правила:

/* Восприятие Bootstrap не будет затруднено: сформулировано точно и верно! */
.custom-align-right {
  text-align: right !important;
}

Добавление этих стилей непосредственно в ячейки таблицы гарантирует моментальный результат:

<!-- Внимание! Текст движется вправо! -->
<td class="custom-align-right">Пользовательский текст</td>

Визуализация

Можно представить ячейки таблицы как ячейки для хранения и показать выравнивание текста, сопоставив его с размещением книг на полке (да здравствует аллюзия 😏):

| Ориентационное положение книг (настраиваемое расположение текста в ячейке таблицы) | 📚📚📚📚📚 |
| Выровнено по центру                                                       |   📚📚📚   |
| Выровнено вправо                                                          |       📚📚📚 |
| Выровнено по ширине                                                       | 📚 📚 📚 📚 |

• По умолчанию: Книги расставлены слева – именно так работает принцип наименьших усилий!
• По центру: Книги расположены в центре – настоящее удовольствие для глаз!
• Справа: Книги выровнены вправо – порядок нужно соблюдать во всем!
• По ширине: Книги равномерно распределены – недаром говорят о настоящей братье!

Примеры использования выравнивания текста

В таблицах для печати

В таблицах, предназначенных для печати, часто используется выравнивание вправо для удобства восприятия числовых данных:

<!-- Процитируем числа, выровненные по правому краю, в удобочитаемом формате -->
<td class="text-end">123.45</td>

Подробнее об этом расскажет наш спикер на видео

В пользовательских интерфейсах

В пользовательских интерфейсах выравнивание слева или по ширине помогает представить данные более понятным способом:

<!-- Ифактура лаконична в организации данных пользователя -->
<td class="text-start">Данные пользователя</td>

Для веб-доступности

Для языков, читаемых с права налево, выравнивание вправо является жизненно необходимым. Здесь Bootstrap 5 и демонстрирует свои возможности:

<!-- فالنص الجميل هنا ينتهي على اليمين -->
<td class="text-end">المعلومات</td>

Полезные материалы