Bootstrap4のデフォルトの書式は下記の通りです。
- <p>Bootstrap4のタイポグラフィー</p>
結果:
Bootstrap4のタイポグラフィー
font-size:16px
line-height:1.5px
font-family : "Helvetica Neue"、Helvetica、Arial、sans-serif
「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
見出しタグH1 ~ H6
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
クラス
- .display-1 : より大きい見出し
- .display-2 : より大きい見出し
- .display-3 : より大きい見出し
- .display-4 : より大きい見出し
- .font-weight-bold : 太字
- .font-weight-normal : ノーマルフォント
- .font-weight-light : 軽量フォント
- .font-italic : イタリックテキスト
- .lead : 段落を目立たせる
- .small : テキストを85%縮小
- .text-left : テキストの左寄せ
- .text-center : テキストの中央寄せ
- .text-right : テキストの右寄せ
- .text-justify : テキストの整列
- .text-nowrap : テキストの折り返しをしません
- .text-lowercase : 小文字のテキストを表示
- .text-uppercase : 大文字のテキストを表示
- .text-capitalize : 大文字のテキスト表示
- .initialism : 要素内のテキストを小さいフォントで表示。このクラスは直下の子クラスのみ適用される。
- .list-inline : リストを一行で表示
- .pre-scrollable : <pre>要素をスクロール可能にする
- <カラー>
- .text-muted
- .text-primary
- .text-success
- .text-info
- .text-warning
- .text-danger
- .text-secondary
- .text-white
- .text-dark
- .text-light
利用例:
- <p class="font-weight-light text-success">
- 軽量フォント、カラーsuccess
- </p>
結果:
軽量フォント、カラーsuccess