プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

【Bootstrap】テキストの配置位置やフォントサイズを設定しよう!

Bootstrapで使用可能なテキストの調べ方

Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Text」ページでテキストの配置位置(Text alignment)、大文字・小文字変換(Text transform)、太さや斜体(Font weight and italics)など確認することができます。

getbootstrap.com

テキストの配置位置(Text alignment)

テキストを左揃え、中央揃え、右揃えにすることができます。

Left

Center

Right

<p class="text-left">Left</p>    //左揃え

<p class="text-center">Center</p>  //中央揃え

<p class="text-right">Right</p>  //右揃え

テキストのサイズ

display-1を使うことでテキストのサイズを調節できます。

Hello

Hello

Hello

Hello

<p class="display-1">Hello</p>

<p class="display-2">Hello</p>

<p class="display-3">Hello</p>

<p class="display-4">Hello</p>

大文字・小文字変換(Text transform)

Lowercased text.

Uppercased text.

<p class="text-lowercase">Lowercased text.</p> //すべて小文字に変換
<p class="text-uppercase">Uppercased text.</p> //すべて大文字に変換

太字と斜体(Font weight and italics)

テキストを太字、普通、細目、イタリック体にすることができます。

Bold text.

Normal weight text.

Light weight text.

Italic text.

<p class="font-weight-bold">Bold text.</p>       //太字
<p class="font-weight-normal">Normal weight text.</p> //普通
<p class="font-weight-light">Light weight text.</p>  //細め
<p class="font-italic">Italic text.</p>         //イタリック体

等幅フォント(Monospace)

This is in monospace

<p class="text-monospace">This is in monospace</p>