¿Hay un conjunto de clases en el marco Bootstrap de Twitter que alinea el texto?

Por ejemplo, tengo algunas tablas con $totales que quiero alinear a la derecha ...

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

y

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

Bootstrap 3

v3 Documentos de alineación de texto

<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 Documentos de alineación de texto

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

Usar Bootstrap 3.x usando text-rightfunciona perfectamente:

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

No, Bootstrap no tiene una clase para eso, pero este tipo de clase se considera una clase de "utilidad", similar a la clase ".pull-right" que mencionó @anton.

Si observa utilidades, a menos que vea muy pocas clases de utilidad en Bootstrap, la razón es que este tipo de clase generalmente está mal visto y se recomienda usarlo para: a) creación de prototipos y desarrollo, para que pueda construir rápidamente fuera de sus páginas, luego elimine las clases pull-right y pull-left a favor de aplicar flotantes a clases más semánticas o a los elementos mismos, o b) cuando es claramente más práctico que una solución más semántica.

En su caso, según su pregunta, parece que desea que cierto texto se alinee a la derecha de su tabla, pero no todo. Semánticamente, sería mejor hacer algo como (solo voy a hacer algunas clases aquí, excepto la clase de arranque predeterminada, .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>

Y simplemente aplique las declaraciones text-align: lefto text-align: righta las clases de valor de precio y etiqueta de precio (o cualquier clase que funcione para usted).

El problema con la aplicación align-rightcomo clase es que si desea refactorizar sus tablas, tendrá que rehacer el marcado y los estilos. Si usa clases semánticas, es posible que pueda refactorizar solo el contenido CSS. Además, si se toma el tiempo de aplicar una clase a un elemento, es una buena práctica tratar de asignar un valor semántico a esa clase para que el marcado sea más fácil de navegar para otros programadores (o para usted tres meses después).

Una forma de pensarlo es esta: cuando planteas la pregunta "¿Para qué es esto td?", No obtendrás una aclaración de la respuesta "alinear a la derecha".

Bootstrap 2.3 tiene clases de utilidad text-left, text-righty text-center, pero no funcionan en celdas de la tabla. Hasta que se publique Bootstrap 3.0 (donde han solucionado el problema) y pueda realizar el cambio, he agregado esto a mi CSS del sitio que se carga después de bootstrap.css:

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

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

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

Simplemente agregue una hoja de estilo "personalizada" que se carga después de la hoja de estilo de Bootstrap. Entonces las definiciones de clase están sobrecargadas.

En esta hoja de estilo declare la alineación de la siguiente manera:

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

Ahora puede utilizar las convenciones de alineación "comunes" para los elementos td y th.

Supongo que porque CSS ya tiene text-align:right, AFAIK, Bootstrap no tiene una clase especial para ello.

Bootstrap tiene "pull-right" para divs flotantes, etc. a la derecha.

Bootstrap 2.3 acaba de salir y agregó estilos de alineación de texto:

Bootstrap 2.3 lanzado (2013-02-07)

¡Bootstrap 4 se acerca ! Las clases de utilidad familiarizadas en Bootstrap 3.xahora están habilitadas para el punto de interrupción. Los puntos de ruptura predeterminados son: xs, sm, md, lgy xl, por lo que estas clases de alineación de texto un aspecto similar .text-[breakpoint]-[alignnment].

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

Importante: Al escribir esto, Bootstrap 4 solo está en Alpha 2. Estas clases y cómo se usan están sujetas a cambios sin previo aviso.

Alineación de texto de Bootstrap en v3.3.5:

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

Ejemplo de CodePen

Las siguientes líneas de código funcionan correctamente. Puede asignar las clases como centro de texto, izquierda o derecha, el texto se alineará en consecuencia.

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

Aquí no hay necesidad de crear ninguna clase externa. Estas son las clases Bootstrap y tienen su propia propiedad.

Puede usar este CSS a continuación:

.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-alignclase es totalmente válida y más utilizable que tener una .price-labely .price-valueque ya no sirven.

Recomiendo ir al 100% con una clase de utilidad personalizada llamada

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

Me gusta hacer algo de magia, pero eso depende de ti, como algo:

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

Aquí hay una respuesta corta y dulce con un ejemplo.

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>

Ampliando la respuesta de David , solo agrego una clase simple para aumentar Bootstrap de esta manera:

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

Ahora, con el lanzamiento de Bootstrap 3, puede usar las clases de text-centeralineación central, text-left alineación izquierda, text-rightalineación derecha ytext-justify alineación justificada.

Bootstrap es un marco frontend muy simple para trabajar, una vez que lo utiliza. Además de ser muy fácil de personalizar para adaptarse a su gusto.

Tenemos cinco clases para eso, que puede consultar aquí: 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>

Aquí está la solución más simple.

Puede asignar las clases como centro de texto, izquierda o derecha. El texto se alineará de acuerdo con estas clases. No tiene que hacer clases por separado. Estas clases están incorporadas en BootStrap 3

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

Mira aquí: Demo

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

En Bootstrap versión 4. Hay algunas clases incorporadas para posicionar texto.

Para centrar el encabezado de la tabla y el texto de datos:

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

También puede usar estas clases para posicionar cualquier texto.

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

Para más detalles

Espero que sea de ayuda.

En esta clase no válida Bootstrap de tres clases

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

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

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

Uso text-align:center !important. Puede haber otras text-alignreglas CSS, por lo que !importantes importante.

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>