Bootstrapでdiv内のテキストを左右揃えする代替方法

Bootstrapでdiv内のテキストを左右揃えする方法

Bootstrapでは、div要素内のテキストを左揃えや右揃えにするためのスタイルクラスが提供されています。

左揃え

• text-left: div内のテキストを左揃えします。

<div class="text-left">
  This text is left-aligned.
</div>

右揃え

<div class="text-right">
  This text is right-aligned.
</div>

注意:

• これらのクラスは、div要素だけでなく、他のブロックレベル要素にも適用できます。
• Bootstrap 4以降では、text-startとtext-endというクラスも使用できます。これらは、言語の方向に基づいて自動的に左揃えまたは右揃えを行います。

例:

<div class="container">
  <div class="row">
    <div class="col-md-6 text-left">
      左揃えのテキスト
    </div>
    <div class="col-md-6 text-right">
      右揃えのテキスト
    </div>
  </div>
</div>

<div class="text-left">
  左揃えのテキストです。
</div>

このコードでは、div要素にtext-leftクラスを適用することで、その中のテキストを左揃えにします。

<div class="text-right">
  右揃えのテキストです。
</div>

複数の列での左右揃え

<div class="container">
  <div class="row">
    <div class="col-md-6 text-left">
      左揃えのテキスト
    </div>
    <div class="col-md-6 text-right">
      右揃えのテキスト
    </div>
  </div>
</div>

Flexboxを使用する

Flexboxは、アイテムを柔軟に配置できるCSSレイアウトモジュールです。justify-contentプロパティを使用して、アイテムを水平方向に配置できます。

<div class="d-flex justify-content-start">
  左揃えのテキスト
</div>

<div class="d-flex justify-content-end">
  右揃えのテキスト
</div>

• justify-content-start: アイテムを左端に配置します。

CSSのtext-alignプロパティを使用する

CSSのtext-alignプロパティを使用して、テキストを水平方向に配置することもできます。

<div style="text-align: left;">
  左揃えのテキスト
</div>

<div style="text-align: right;">
  右揃えのテキスト
</div>

• Flexboxは、より柔軟なレイアウトを提供し、複雑なレイアウトを作成する場合に便利です。
• CSSのtext-alignプロパティは、シンプルなテキストの配置に適しています。