Alinhar à esquerda e alinhar à direita dentro de div no Bootstrap

Quais são algumas das maneiras comuns de alinhar à esquerda algum texto e alinhar à direita outro texto dentro de um contêiner div no bootstrap?

por exemplo

Total cost                   $42

O custo total acima deve ser alinhado à esquerda e $ 42 é alinhado à direita

Atualização de 2018 ...

Bootstrap 4.1 ou superior

• pull-right é agora float-right
• text-right é o mesmo que 3.xe funciona para elementos embutidos
• ambos float-*e text-*são responsivos para alinhamento diferente em diferentes larguras (ou seja: float-sm-right)

Os utils do flexbox (por exemplo:) justify-content-betweentambém podem ser usados ​​para alinhamento:

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

ou margens automáticas (por exemplo ml-auto:) em qualquer contêiner flexbox (linha, barra de navegação, cartão, d-flex, etc ...)

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

Bootstrap 4 Align Demo
Exemplos de alinhamento à direita do Bootstrap 4 (float, flexbox, texto à direita, etc ...)

Bootstrap 3

Use a pull-rightclasse ..

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

Demonstração do Bootstrap 3

Você também pode usar a text-rightclasse assim:

  <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

Em vez de usar pull-rightclasse, é melhor usar text-rightclasse na coluna, porque pull-rightàs vezes cria problemas ao redimensionar a página.

No Bootstrap 4, a resposta correta é usar a text-xs-rightclasse.

Isso funciona porque xsdenota o menor tamanho de viewport no BS. Se você quiser, poderá aplicar o alinhamento apenas quando a janela de visualização for média ou maior usando text-md-right.

No alfa mais recente, text-xs-rightfoi simplificado para text-right.

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

O Bootstrap v4 apresenta o suporte ao 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>

Saiba mais em https://v4-alpha.getbootstrap.com/utilities/flexbox/

Podemos conseguir pelo 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%

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

Isso deve fazer o trabalho apenas ok