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