[解決済み] Bootstrapでdivの左寄せと右寄せをする

質問

bootstrapのdivコンテナ内で、あるテキストを左寄せ、他のテキストを右寄せにする一般的な方法は何でしょうか？

例

Total cost                   $42

上記の合計金額は左揃えのテキストで、$42は右揃えのテキストです。

解決方法は？

2021年のアップデート...

Bootstrap 5 (ベータ)

フレックスボックスの 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

Bootstrap 4+

• pull-right は現在 float-right
• text-right は3.xと同じで、インライン要素に対して機能します。
• 両方 float-* と text-* は レスポンシブ を使用すると、異なる幅で異なるアライメントになります（例． float-sm-right )

フレックスボックスのユーティリティ（例． 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の整列デモ
Bootstrap 4の右寄せの例 (float, flexbox, text-right, etc...)

ブートストラップ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