Alinear a la izquierda y a la derecha dentro de un div en Bootstrap

¿Cuáles son las formas más comunes de alinear a la izquierda un texto y a la derecha otro dentro de un contenedor div en bootstrap?

Por ejemplo

Total cost                   $42

El coste total de arriba debe ser un texto alineado a la izquierda y $42 es un texto alineado a la derecha

Solución

***La actualización del año 2018...

Bootstrap 4.1+

  • pull-right es ahora float-right
  • text-right es lo mismo que en 3.x, y funciona para elementos en línea
  • tanto float-* como text-* son responsive para diferentes alineaciones en diferentes anchos (por ejemplo: float-sm-right)

Las utilidades de flexbox (ej.: justify-content-between) también pueden utilizarse para la alineación:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

o, auto-margenes (eg:ml-auto) en cualquier contenedor flexbox (row,navbar,card,d-flex,etc...)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)


Bootstrap 3

Utiliza la clase pull-right..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Demo de Bootstrap 3

También puedes usar la clase text-right así:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

Comentarios (2)

En lugar de usar la clase pull-right, es mejor usar la clase text-right en la columna, porque pull-right crea problemas a veces al redimensionar la página.

Comentarios (0)
<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

Eso debería hacer el trabajo bien

Comentarios (0)