Overview

• Bootstrapにはデフォルトで８色の色が設定されています。
• それらの色はを使って文字色や背景色などを展開できます。
• 今回は、それらの８色に加えて追加でカラーリングを設定してみます。
  • １行追加するだけで他のカラーリング同様、text-primaryやbg-primaryのような使い方ができるようになります。

Get started!

helloクラスを追加

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark,
  "hello":      red,
) !default;

追加したクラスを使ってみる

<p class='bg-hello text-white'>Hello,World.</p>