タイポグラフィー:Bootstrap 4

Bootstrap4のデフォルトの書式は下記の通りです。

  1. <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)

クラス

  1. .display-1 : より大きい見出し
  2. .display-2 : より大きい見出し
  3. .display-3 : より大きい見出し
  4. .display-4 : より大きい見出し
  5. .font-weight-bold : 太字
  6. .font-weight-normal : ノーマルフォント
  7. .font-weight-light : 軽量フォント
  8. .font-italic : イタリックテキスト
  9. .lead : 段落を目立たせる
  10. .small : テキストを85%縮小
  11. .text-left : テキストの左寄せ
  12. .text-center : テキストの中央寄せ
  13. .text-right : テキストの右寄せ
  14. .text-justify : テキストの整列
  15. .text-nowrap : テキストの折り返しをしません
  16. .text-lowercase : 小文字のテキストを表示
  17. .text-uppercase : 大文字のテキストを表示
  18. .text-capitalize : 大文字のテキスト表示
  19. .initialism : 要素内のテキストを小さいフォントで表示。このクラスは直下の子クラスのみ適用される。
  20. .list-inline : リストを一行で表示
  21. .pre-scrollable : <pre>要素をスクロール可能にする
  22.  
  23. <カラー>
  24. .text-muted
  25. .text-primary
  26. .text-success
  27. .text-info
  28. .text-warning
  29. .text-danger
  30. .text-secondary
  31. .text-white
  32. .text-dark
  33. .text-light

利用例:

  1. <p class="font-weight-light text-success">
  2. 軽量フォント、カラーsuccess
  3. </p>

結果:

軽量フォント、カラーsuccess

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ