Bootstrapのdiv内での左揃えと右揃え質問する

Question

2021 アップデート...

Bootstrap 5 (ベータ版)

flexbox div 内またはrow...内で配置する場合

ml-auto今でしょms-auto
mr-auto今でしょme-auto

テキストの配置またはフロート用。

text-left今でしょtext-start
text-right今でしょtext-end
float-left今でしょfloat-start
float-right今でしょfloat-end

ブートストラップ4+

pull-right今でしょfloat-right
text-right3.xと同じで、インライン要素でも動作します
float-*とtext-*は両方とも応答性異なる幅で異なる配置の場合（例float-sm-right：）

flexbox ユーティリティ (例: justify-content-between) も配置に使用できます。

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

ml-autoまたは、任意のフレックスボックスコンテナー (行、ナビゲーションバー、カード、d-flex など) 内の自動マージン (例: )

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

Bootstrap 4 Align デモ
 Bootstrap 4 右揃えの例(float、flexbox、text-right など)

ブートストラップ3

クラスを使用します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 デモ

次のようにクラスを使用することもできますtext-right:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 デモ 2

Answer 1