ReactでBootstrapを使った際の「text-left」問題とその解決法

概要

この記事では、ReactプロジェクトでBootstrapを使用する際に直面した「text-left」クラスが期待通りに動作しなかった問題について解説し、その解決法を紹介します。

問題の詳細

ReactでBootstrapのContainerとTableコンポーネントを使用して、テーブル内のテキストを左寄せにしようとしたところ、text-leftクラスが機能しませんでした。

<Container>
  <Table>
    <tbody>
      <tr>
        <th className="text-left">犬の散歩</th>
      </tr>
    </tbody>
  </Table>
</Container>

解決策

調べたところ、Bootstrap 5以降では、text-leftクラスが廃止され、text-startクラスが導入されたことがわかりました。これにより、テキストを左寄せにするにはtext-startを使用する必要があります。

<Container>
  <Table>
    <tbody>
      <tr>
        <th className="text-start">犬の散歩</th>
      </tr>
    </tbody>
  </Table>
</Container>

参考