Alignement à gauche et alignement à droite dans div dans Bootstrap

Quelles sont les façons courantes d'aligner à gauche du texte et d'aligner à droite un autre texte dans un conteneur div dans le bootstrap?

par exemple

Total cost                   $42

Le coût total doit être supérieur au texte aligné à gauche et 42 $ au texte aligné à droite

Mise à jour 2018 ...

Bootstrap 4.1+

• pull-right est maintenant float-right
• text-right est le même que 3.x et fonctionne pour les éléments en ligne
• à la fois float-*et text-*sont sensibles à un alignement différent à différentes largeurs (ex: float-sm-right)

Les utilitaires flexbox (par exemple:) justify-content-betweenpeuvent également être utilisés pour l'alignement:

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

ou, les marges automatiques (par exemple ml-auto:) dans n'importe quel conteneur flexbox (ligne, barre de navigation, carte, d-flex, etc ...)

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

Démonstration de
Bootstrap 4 Align Exemples de Bootstrap 4 Right Align (float, flexbox, text-right, etc ...)

Bootstrap 3

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

Démo Bootstrap 3

Vous pouvez également utiliser la text-rightclasse comme ceci:

  <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

Au lieu d'utiliser la pull-rightclasse, il est préférable d'utiliser la text-rightclasse dans la colonne, car cela pull-rightcrée parfois des problèmes lors du redimensionnement de la page.

Dans Bootstrap 4, la bonne réponse consiste à utiliser la text-xs-rightclasse.

Cela fonctionne car xsindique la plus petite taille de fenêtre dans BS. Si vous le souhaitez, vous pouvez appliquer l'alignement uniquement lorsque la fenêtre est moyenne ou plus grande à l'aide de text-md-right.

Dans la dernière version alpha, text-xs-righta été simplifié en 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 introduit le support 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>

En savoir plus sur https://v4-alpha.getbootstrap.com/utilities/flexbox/

Nous pouvons réaliser par 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%

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

Cela devrait faire le travail juste ok