Classe d'alignement du texte à l'intérieur d'un tableau

Question

Existe-t-il un ensemble de classes dans le cadre Bootstrap de Twitter qui permet d'aligner le texte ?

Par exemple, j'ai des tables avec $ les totaux que je veux aligner à droite...

<th class="align-right">Total</th>

y

<td class="align-right">$1,000,000.00</td>

Answer 1

Bootstrap 3

v3 Docs sur l'alignement du texte

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

Bootstrap 4

v4 Docs sur l'alignement du texte

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

---

Bootstrap 5

v5 Docs sur l'alignement du texte

text-left a été remplacé par text-start , text-right a été remplacé par text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Answer 2

Utilisation de Bootstrap 3.x text-right fonctionne parfaitement :

<td class="text-right">
  text aligned
</td>

Answer 3

Non, Bootstrap n'a pas de classe pour cela, mais ce type de classe est considéré comme une classe " utilitaire ", similaire à la classe " .pull-right " mentionnée par @anton.

Si vous regardez le fichier utilities.less, vous verrez très peu de classes utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu, et qu'il est recommandé de l'utiliser pour soit : a) pour le prototypage et le développement - afin de pouvoir construire rapidement vos pages, puis de supprimer les classes pull-right et pull-left en faveur de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou bien b) lorsque c'est clairement plus pratique qu'une solution plus sémantique.

Dans votre cas, d'après votre question, il semble que vous souhaitiez que certains textes soient alignés à droite dans votre tableau, mais pas tous. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste inventer quelques classes ici, à l'exception de la classe bootstrap par défaut, .table) :

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

Et il suffit d'appliquer le text-align: left o text-align: right aux classes price-value et price-label (ou toute autre classe qui vous convient).

Le problème de l'application align-right comme une classe, c'est que si vous voulez remanier vos tableaux, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous en sortir en ne remaniant que le contenu CSS. De plus, si vous prenez le temps d'appliquer une classe à un élément, il est préférable d'essayer d'attribuer une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour les autres programmeurs (ou pour vous trois mois plus tard).

Une façon de voir les choses est la suivante : lorsque vous posez la question "A quoi sert ce td ?", vous n'obtiendrez pas de clarification en répondant "align-right".

Answer 4

Bootstrap 2.3 a des classes utilitaires text-left , text-right y text-center mais ils ne fonctionnent pas dans les cellules des tableaux. Jusqu'à ce que Bootstrap 3.0 soit publié (et que le problème soit résolu) et que je puisse faire le changement, j'ai ajouté ceci à mon site CSS qui est chargé après bootstrap.css :

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

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

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

Answer 5

Il suffit d'ajouter une feuille de style "personnalisée" qui est chargée après la feuille de style de Bootstrap. Ainsi, les définitions des classes sont surchargées.

Dans cette feuille de style, déclarez l'alignement comme suit :

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

Vous êtes maintenant en mesure d'utiliser les conventions d'alignement "communes" pour les éléments td et th.