Alinhar à esquerda e à direita dentro do div no 'Bootstrap'

Quais são algumas das maneiras comuns de esquerda alinhar algum texto e direito alinhar algum outro texto dentro de um container div em bootstrap?

por exemplo 

Total cost                   $42

acima do custo total deve estar o texto alinhado à esquerda e $ 42 é o texto alinhado à direita

Author: Martin Lindgren, 2013-09-07
Source

6 answers

2018 actualização...

Bootstrap 4.1+

  • pull-right está agora float-right
  • text-right é igual a 3.x, e trabalha para elementos incorporados
  • ambos float-* e text-* são sensíveis para um alinhamento diferente em larguras diferentes (ou seja,: float-sm-right)

Os utils flexbox (eg:justify-content-between) também podem ser usados para alinhamento: 

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

Ou margens automáticas (eg:ml-auto) em qualquer contentor flexbox (linha, navbar, carta, D-flex, etc...)

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

Demonstração de alinhamento do Bootstrap 4
Bootstrap 4 exemplos de alinhamento à direita (float, flexbox, text-right, etc...)

Bootstrap 3

Usa a classe 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>

Demonstração Do Bootstrap 3

Você também pode usar a classe text-right Assim: 

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

Demonstração Do Bootstrap 3 2

 399
Author: Zim, 2018-08-17 12:03:16

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

 42
Author: Arun Agarwal, 2015-06-22 14:44:00

no Bootstrap 4 a resposta correta é usar a classe text-xs-right.

Isto funciona porque xs denota o menor tamanho da área de visualização em BS. Se o desejar, só poderá aplicar o alinhamento quando a área de visualização For média ou maior usando text-md-right.

No último alfa, {[1] } foi 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>
 10
Author: Erik Berkun-Drevnig, 2017-01-08 20:58:37

Bootstrap v4 introduz o suporte 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/

 3
Author: William Entriken, 2017-03-23 13:38:36

Podemos conseguir com o 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

 2
Author: pradeep kumar, 2017-12-27 12:31:08 
<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 dar certo.
 1
Author: Terrymight, 2016-05-03 07:32:31