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.
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 lignefloat-*
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>
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>
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.
<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.