Alinhamento à esquerda e à direita dentro do div em Bootstrap

Quais são algumas das formas comuns de alinhar à esquerda algum texto e à direita algum outro texto dentro de um recipiente de mergulho em bootstrap?

por exemplo

Total cost                   $42

Acima do custo total deve ser texto alinhado à esquerda e $42 é texto alinhado à direita

Solução

2018 Actualização...

**Bootstrap 4.1+***

  • A "direita puxada" é agora "flutuar-direita".
  • O "texto-direito" é o mesmo que o 3.x, e funciona para elementos em linha
  • ambos float-* e text-* são responsivos para diferentes alinhamentos em diferentes larguras (ou seja: float-sm-right)

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

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

ou, auto-margins (ex:ml-auto) em qualquer recipiente flexbox (linha,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***

Utilize a classe `pull-direita'...

<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

Você também pode utilizar a classe "texto-direita" desta forma:

  <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

Comentários (2)

Ao invés de utilizar a classe pull-direita', é melhor utilizar a classetexto-direita' na coluna, porque `pull-direita' cria problemas às vezes enquanto redimensiona a página.

Comentários (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>

Isso deve fazer o trabalho bem.

Comentários (0)