3

Estoy queriendo alinear a la derecha un label de bootstrap dentro un td alineado a la izquierda, el objetivo sería lo siguiente:

Tabla

No lo estoy logrando, intente alinear el span a la derecha del td de la siguiente manera, pero no funciona:

<td  class="text-left">
    Texto de la tabla 
    <span class="label label-default text-right">0 - 1</span>
</td>

El código que utilizo es el siguiente:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-bordered">
  <tr>
    <td><a href="">Inter Milan</a></td>
    <td  class = "text-left">Texto de la tabla <span class="label label-default text-right">0 - 1</span></td>
    <td><a href="">Lazzio Roma</a></td>
  </tr>
  <tr>
    <td><a href="">Bayern Munich</a></td>
    <td class = "text-left">Texto de la tabla <span class="label label-default text-right">3 - 3</span></td>
    <td><a href="">Herta Berlin</a></td>
  </tr>
</table>

3 respuestas 3

4

Intenta aplicandole float:rigth para moverlos a la derecha:

td .label-default{
    float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-bordered">
  <tr>
    <td><a href="">Inter Milan</a></td>
    <td  class = "text-left">Texto de la tabla <span class="label label-default text-right">0 - 1</span></td>
    <td><a href="">Lazzio Roma</a></td>
  </tr>
  <tr>
    <td><a href="">Bayern Munich</a></td>
    <td class = "text-left">Texto de la tabla <span class="label label-default text-right">3 - 3</span></td>
    <td><a href="">Herta Berlin</a></td>
  </tr>
</table>

1
  • ¡Funcionó! Muchas gracias por la ayuda @Eirner. Saludos!
    – Blasito
    Commented el 15 sept. 2017 a las 16:39
2

No es necesario de editar o crear una clase, simplemente con las classes helper de bootstrap (Quick floats) puedes posicionar los elementos deseado, en este caso:

  • pull-right:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-bordered">
  <tr>
    <td><a href="">Inter Milan</a></td>
    <td  class = "text-left">Texto de la tabla <span class="label label-default pull-right">0 - 1</span></td>
    <td><a href="">Lazzio Roma</a></td>
  </tr>
  <tr>
    <td><a href="">Bayern Munich</a></td>
    <td class = "text-left">Texto de la tabla <span class="label label-default pull-right">3 - 3</span></td>
    <td><a href="">Herta Berlin</a></td>
  </tr>
</table>

Para la version 4 de bootstrap han cambiado el nombre de la classe pull-* y además lo puedes variar según el viewport:

  • float-left | float-right | float-none - Para todos tamaños de viewport
  • float-sm-* | float-md-* | float-lg-* | float-xl-* - Según el viewport
1
  • Opte por esta respuesta ya que no hace falta sobreescribir la clase label-default.
    – Blasito
    Commented el 15 sept. 2017 a las 16:40
-1

puedes agregarle la clase .pull-right predeterminada de bootstrap con eso no agregas mas css

.text-right {
  background: brown;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-bordered">
  <tr>
    <td><a href="">Inter Milan</a></td>
    <td  class = "text-left">Texto de la tabla <span class="label pull-right text-right">0 - 1</span></td>
    <td><a href="">Lazzio Roma</a></td>
  </tr>
  <tr>
    <td><a href="">Bayern Munich</a></td>
    <td class = "text-left">Texto de la tabla <span class="label pull-right text-right">3 - 3</span></td>
    <td><a href="">Herta Berlin</a></td>
  </tr>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.