Alignement à gauche et à droite d'un div dans Bootstrap

Quelles sont les méthodes courantes pour aligner à gauche un texte et à droite un autre texte dans un conteneur div dans bootstrap ?

Par exemple

Total cost                   $42

Le coût total ci-dessus doit être aligné à gauche et 42 $ est aligné à droite.

Solution

2018 Update...

Bootstrap 4.1+

  • pull-right est maintenant float-right.
  • text-right est identique à la version 3.x, et fonctionne pour les éléments en ligne
  • float-* et text-* sont tous deux responsive pour un alignement différent à différentes largeurs (ie : float-sm-right)

Les utilitaires flexbox (par exemple : justify-content-between) peuvent é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 (eg:ml-auto) dans tout conteneur flexbox (row,navbar,card,d-flex,etc...)

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

Bootstrap 4 Align Demo
Exemples d'alignement à droite de Bootstrap 4(float, flexbox, text-right, etc...)


Bootstrap 3

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

Bootstrap 3 Demo

Vous pouvez également utiliser la classe text-right 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

Commentaires (2)

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

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

Cela devrait faire l'affaire.

Commentaires (0)