Alignement à gauche et alignement à droite dans div dans Bootstrap


268

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

Réponses:


611

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


2
Pour Bootstrap 3, pour la colonne, a text-rightfonctionné pour moi.
Florin Vîrdol

60

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.


17

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>


6

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


1
<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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.