Класс text-align для ячеек таблицы

В Bootstrap 3.x правильное выравнивание текста вправо можно добиться с помощью класса text-right. Вот пример, как это можно сделать:

<td class="text-right">
  текст выровнен
</td>

Используя класс text-right, текст внутри ячейки таблицы (<td>) будет выровнен по правому краю. Убедитесь, что Bootstrap правильно подключен к вашему проекту, чтобы использовать все его возможности.

Нет, в Bootstrap нет класса для этого, но подобные классы считаются "утилитными", подобно классу .pull-right, который упоминал @anton.

Если вы посмотрите на файл utilities.less, вы увидите очень немного утилитных классов в Bootstrap, причина в том, что такие классы, как правило, не рекомендуются, и их следует использовать для:

1. прототипирования и разработки — чтобы вы могли быстро создать страницы, а затем удалить классы pull-right и pull-left в пользу применения флоатов к более семантическим классам или к самим элементам, или
2. когда это явно более практично, чем более семантическое решение.

В вашем случае, судя по вопросу, вы хотите, чтобы определенный текст выравнивался по правому краю в вашей таблице, но не весь. Семантически лучше сделать что-то вроде (я просто придумаю несколько классов, кроме стандартного класса Bootstrap .table):

<table class="table price-table">
  <thead>
    <th class="price-label">Итого</th>
  </thead>
  <tbody>
    <tr>
      <td class="price-value">$1,000,000.00</td>
    </tr>
  </tbody>
</table>

И просто применить декларации text-align: left или text-align: right к классам price-value и price-label (или другим классам, которые вам подходят).

Проблема с применением класса align-right в том, что если вы захотите изменить разметку таблиц, вам придется переделывать и структуру, и стили. Если вы используете семантические классы, вы сможете обойтись переделкой только CSS-контента. Кроме того, если вы уделяете время на применение класса к элементу, то лучшей практикой будет попытаться присвоить семантическое значение этому классу, чтобы разметка была проще для других программистов (или для вас через три месяца).

Одним из способов посмотреть на это можно так: когда вы задаете вопрос "Для чего нужен этот td?", вы не получите ясного ответа на "align-right".

В Bootstrap 2.3 есть утилитные классы text-left, text-right и text-center, но они не работают в ячейках таблицы. До выхода Bootstrap 3.0 (где эта проблема будет исправлена) и возможности перейти на новую версию, я добавил следующий код в CSS своего сайта, который загружается после bootstrap.css:

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

Вы можете добавить "пользовательский" CSS-стиль, который будет загружаться после стилей Bootstrap. Таким образом, определения классов будут переопределены.

В этом стилевом файле объявите выравнивание следующим образом:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Теперь вы сможете использовать "общие" соглашения по выравниванию для элементов td и th.

Данные строки кода работают корректно. Вы можете использовать классы, такие как text-center, text-left или text-right, и текст будет выравнен соответствующим образом.

<p class="text-center">День 1</p> 
<p class="text-left">День 2</p> 
<p class="text-right">День 3</p>

В данном случае нет необходимости создавать какие-либо внешние классы. Это классы Bootstrap, и у них есть собственные стили.