Colors

Vitamin has unlocked the full color palette of Bootstrap. With Vitamin, you can continue using traditional Bootstrap colors like "primary" and "success", but now you also have access to a wider range of colors including "indigo", "teal", "orange", "purple" and "pink". This allows for even greater customization and optimization of your website design. Say goodbye to the limitations of traditional Bootstrap and embrace the full power of Vitamin's color options.

Colors

With vitamin: now you have more text colors unlocked by default like indigo, purple, teal, orange & pink

.text-primary

.text-secondary

.text-success

.text-danger

.text-indigo

.text-orange

.text-pink

.text-purple

.text-warning

.text-info

.text-light

.text-teal

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Theme colors

Now with Vitamin, you have access to all of the Bootstrap theme colors, including primary, success, and warning, but with the added bonus of being able to easily use new colors such as indigo, teal, orange, and pink without any additional configuration. This gives you even more options to choose from, allowing you to further optimize your website's look and feel.

Primary

Secondary

Success

Danger

Warning

Info

Indigo

Teal

Orange

Purple

Pink

Light

Dark

All these colors are available as a Sass map, $theme-colors.

                        $theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "indigo":     $indigo,
  "teal":       $teal,
  "orange":     $orange,
  "pink":       $pink,
  "light":      $light,
  "dark":       $dark
);

All colors

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
all this info from bootstrap web

$blue #0d6efd

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple #6f42c1

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #198754

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #adb5bd

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$black #000

$white #fff