Align to the right a label inside a td aligned to the left in bootstrap

Navigation
3

I'm wanting to align on the right a label of bootstrap within a td aligned to the left, the goal would be the following:

I'm not making it, try aligning span to the right of td as follows, but it does not work: 

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

The code I use is the following: 

<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>
    
asked by Blasito 15.09.2017 в 16:27
source

3 answers

2

It is not necessary to edit or create a class, simply with the bootstrap classes helper (Quick floats ) you can position the desired elements, in this case:

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

For the 4 bootstrap version they have changed the name of the classe pull-* and also you can vary it according to the viewport:

  • float-left | float-right | float-none - For all viewport sizes
  • float-sm-* | float-md-* | float-lg-* | float-xl-* - According to the viewport
answered by 15.09.2017 / 17:22
source
4

Try applying float:rigth to move them to the right: 

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>
    
answered by 15.09.2017 в 16:34
0

you can add the bootstrap default .pull-right class with that do not add more 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>
    
answered by 15.09.2017 в 17:47
How do I get all the elements that have a class? by jQuery [closed] Help with Python cycle