Existe-t-il un ensemble de classes dans le framework Bootstrap de Twitter qui aligne le texte?

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

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

et

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

Bootstrap 3

Documents d'alignement de texte v3

<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

Documents d'alignement de texte v4

<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>

L'utilisation de Bootstrap 3.x text-rightfonctionne parfaitement:

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

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 utilities.less, vous verrez très peu de classes d'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: a) le prototypage et le développement - afin que vous puissiez rapidement construire sortez vos pages, puis supprimez les classes pull-right et pull-left au profit de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou b) quand c'est clairement plus pratique qu'une solution plus sémantique.

Dans votre cas, par votre question, il semble que vous souhaitiez aligner un certain texte à droite dans votre tableau, mais pas tout. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste inventer quelques classes ici, à l'exception de la classe d'amorçage 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 appliquez simplement les déclarations text-align: leftor text-align: rightaux classes value-value et price-label (ou à toutes les classes qui fonctionnent pour vous).

Le problème avec l'application en align-righttant que classe est que si vous voulez refactoriser vos tables, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous en sortir en ne refactorisant 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 d'autres programmeurs (ou vous trois mois plus tard).

Une façon d'y penser est la suivante: lorsque vous posez la question "A quoi sert ce td?", Vous n'obtiendrez pas de clarification de la réponse "align-right".

Bootstrap 2.3 a des classes de services publics text-left, text-rightet text-center, mais ils ne fonctionnent pas dans les cellules de table. Jusqu'à ce que Bootstrap 3.0 soit publié (où ils ont résolu le problème) et que je puisse effectuer 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;
}

Ajoutez simplement une feuille de style "personnalisée" qui est chargée après la feuille de style de Bootstrap. Les définitions de classe sont donc 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 pouvez maintenant utiliser les conventions d'alignement "communes" pour les éléments td et th.

Je suppose que parce que CSS a déjà text-align:right, AFAIK, Bootstrap n'a pas de classe spéciale pour cela.

Bootstrap a "pull-right" pour les divs flottants, etc. à droite.

Bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte:

Sortie de Bootstrap 2.3 (2013-02-07)

Bootstrap 4 arrive ! Les classes utilitaires rendues familières dans Bootstrap 3.xsont désormais activées pour les points d'arrêt. Les points d' arrêt par défaut sont: xs, sm, md, lget xl, donc ces classes d'alignement du texte ressemblent à .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Important: Au moment d'écrire ces lignes, Bootstrap 4 est uniquement en Alpha 2. Ces classes et la façon dont elles sont utilisées sont sujettes à changement sans préavis.

Alignement du texte d'amorçage dans la v3.3.5:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

Exemple CodePen

Les lignes de code suivantes fonctionnent correctement. Vous pouvez affecter les classes comme text-center, gauche ou droite, le texte s'alignera en conséquence.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Ici, il n'est pas nécessaire de créer une classe externe. Ce sont les classes Bootstrap et ont leur propre propriété.

Vous pouvez utiliser ce CSS ci-dessous:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

La .text-alignclasse est totalement valide et plus utilisable que d'avoir un .price-labelet .price-valuequi ne sert plus à rien.

Je recommande d'aller à 100% avec une classe d'utilitaires personnalisée appelée

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

J'aime faire de la magie, mais ça dépend de vous, comme quelque chose:

span.pull-right {
  float: none;
  text-align: right;
}

Voici une réponse courte et douce avec un exemple.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

En développant la réponse de David , j'ajoute juste une classe simple pour augmenter Bootstrap comme ceci:

.money, .number {
    text-align: right !important;
}

Ow, avec la sortie de Bootstrap 3, vous pouvez utiliser les classes de text-centerpour l'alignement au centre, text-left pour l'alignement à gauche, text-rightpour l'alignement à droite et text-justifypour un alignement justifié.

Bootstrap est un framework frontend très simple à utiliser, une fois que vous l'utilisez. En plus d'être très facile à personnaliser selon vos goûts.

Nous avons cinq classes pour cela, que vous pouvez consulter à partir d'ici: http://v4-alpha.getbootstrap.com/components/utilities/

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

Voici la solution la plus simple

Vous pouvez affecter les classes comme text-center, gauche ou droite. Le texte s'alignera en conséquence sur ces classes. Vous n'avez pas à faire des cours séparément. Ces classes sont intégrées dans BootStrap 3

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Vérifiez ici: Démo

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

Dans la version Bootstrap 4. Il y a quelques classes intégrées pour positionner le texte.

Pour centrer l'en-tête du tableau et le texte des données:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

Vous pouvez également utiliser ces classes pour positionner n'importe quel texte.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

Pour plus de détails

J'espère que cela vous aidera.

Dans cette classe Bootstrap non valide à trois classes

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

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

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

Utilisez text-align:center !important. Il peut y avoir d'autres text-alignrègles CSS, c'est pourquoi !importantc'est important.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>