Pregunta Bootstrap - Clase text-align para la tabla interna


¿Hay un conjunto de clases en Twitters Bootstrap Framework que alinea el texto?

P.ej. Tengo algunas tablas con $ totales que quiero alineados a la derecha ...

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

y

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

626
2017-10-10 22:45


origen


Respuestas:


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 3 text align example

Bootstrap 4

v4 Text Alignment Docs

<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 4 text align example


1251
2018-02-28 16:03



Usando Bootstrap 3.x usando text-right funciona perfectamente:

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

66
2018-02-10 15:55



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 nos fijamos en utilities.less verá muy pocas clases de utilidad en Bootstrap, la razón es que este tipo de clase generalmente está mal visto, y se recomienda que se use para:  a) creación de prototipos y desarrollo: para que pueda crear rápidamente sus páginas, luego elimine las clases pull-right y pull-left para aplicar flotantes a más clases 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 alinear cierto texto a la derecha de su tabla, pero no todo. Semánticamente, sería mejor hacer algo como (voy a inventar unas pocas clases aquí, excepto la clase predeterminada de arranque, .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 solo aplica el text-align: left o text-align: right declaraciones a las clases price-value y price-label (o las clases que funcionen para usted).

El problema con la aplicación align-right como clase, si quieres refaccionar tus tablas, tendrás que volver a hacer el marcado y los estilos. Si usas clases semánticas, puedes salirte con la refacturación solo del css. Además, si se está tomando el tiempo de aplicar una clase a un elemento, lo mejor es tratar de asignar un valor semántico a esa clase, de modo que el marcado sea más fácil de navegar para otros programadores (o usted tres meses más tarde).

Una forma de pensarlo es esta: cuando haces la pregunta "¿Para qué sirve esta td?", No obtendrás ninguna aclaración de la respuesta "alinear-derecha".


43
2018-04-05 17:58



Bootstrap 2.3 tiene clases de utilidad text-left, text-right y text-center, pero no funcionan en celdas de tabla. Hasta que se publique el bootstrap 3.0 (donde se ha solucionado el problema) y puedo hacer el cambio, lo he agregado al CSS de mi 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;
}

32
2018-06-04 11:20



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 usar las convenciones de alineación "comunes" para los elementos td y th.


25
2017-10-10 22:52



supongo que porque CSS ya tiene text-align:right AFAIK bootstrap no tiene una clase especial para eso.

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

ACTUALIZAR bootstrap 2.3 acaba de salir y agrega estilos de alineación de texto

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/


23
2018-03-18 14:42



Bootstrap 4 viene! Las clases de utilidad familiarizadas en Bootstrap 3.x ahora están habilitados para break-point. Los puntos de interrupción predeterminados son: xs, sm, md, lg y xl, entonces estas clases de alineación de texto se ven algo así como .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.


15
2017-10-14 22:02



Bootstrap Text Alignment 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


12
2018-05-22 06:30



Esta línea de código está funcionando 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 es necesario crear ninguna clase externa, estas son las clases de arranque y tienen su propia propiedad.


10
2017-10-08 08:29



Puedes 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*/

10
2018-02-08 02:59