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

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

p.ej

Total cost                   $42

Por encima del costo total se debe dejar el texto alineado y $ 42 es el texto alineado a la derecha

Actualización 2018 ...

Bootstrap 4.1+

• pull-right es ahora float-right
• text-right es lo mismo que 3.x, y funciona para elementos en línea
• tanto float-*y text-*son sensibles para diferente alineación en diferentes anchuras (es decir: float-sm-right)

Las utilidades de flexbox (por ejemplo:) justify-content-betweentambién se pueden usar para la alineación:

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

o, márgenes automáticos (por ejemplo ml-auto:) en cualquier contenedor de flexbox (fila, barra de navegación, tarjeta, d-flex, etc.)

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

Bootstrap 4 Align Demo
Ejemplos de Bootstrap 4 Right Align (flotante, flexbox, text-right, etc.)

Bootstrap 3

Usa la pull-rightclase ..

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

Bootstrap 3 Demo

También puedes usar la text-rightclase 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

En lugar de usar pull-rightclass, es mejor usar text-rightclass en la columna, porque a pull-rightveces crea problemas al cambiar el tamaño de la página.

En Bootstrap 4 la respuesta correcta es usar la text-xs-rightclase.

Esto funciona porque xsdenota el tamaño de ventana gráfica más pequeño en BS. Si lo desea, puede aplicar la alineación solo cuando la ventana gráfica sea mediana o más grande mediante el uso text-md-right.

En el último alfa, text-xs-rightse ha simplificado a text-right.

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

Bootstrap v4 presenta soporte para flexbox

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Obtenga más información en https://v4-alpha.getbootstrap.com/utilities/flexbox/

Podemos lograr con Bootstrap 4 Flexbox:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Ejemplo: JSFiddle

<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