1. ホーム
  2. html

[解決済み] テーブル内のテキストアラインクラス

2022-03-24 15:55:54

質問

TwitterのBootstrapフレームワークには、テキストを整列させる一連のクラスがありますか?

例えば、いくつかのテーブルで $ の合計を右寄せにしたいのですが...。

<th class="align-right">Total</th>

そして

<td class="align-right">$1,000,000.00</td>

解決方法は?

ブートストラップ3

v3 テキストアライメントの資料

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>


ブートストラップ4

v4 テキストアライメントの資料

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>


ブートストラップ5

v5 テキストアライメントの資料

text-left が置き換えられています。 text-start , text-right に置き換わっています。 text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>