Bootstrap - Colors

Color Utility Classes

Bootstrap has color utility classes that let you apply colors to text and backgrounds. These classes have a naming convention that is easy to understand and use.

Bootstrap has text color classes that can be used on any text element:

Class Description
.text-primary Displays text in the primary color
.text-secondary Displays text in the secondary color
.text-success Displays text in the success color
.text-danger Displays text in the danger color
.text-warning Displays text in the warning color
.text-info Displays text in the info color
.text-light Displays text in the light color
.text-dark Displays text in the dark color
.text-body Displays text in the body color
.text-muted Displays text in the muted color
.text-white Displays text in white
.text-black-50 Displays text in black with 50% opacity
.text-white-50 Displays text in white with 50% opacity

Example: Using text color classes

<p class="text-primary">This text will be in the primary color.</p>
<p class="text-success">This text will be in the success color.</p>

Bootstrap also has background color classes. These classes can be used on any element to set its background color:

Class Description
.bg-primary Sets the background color to primary
.bg-secondary Sets the background color to secondary
.bg-success Sets the background color to success
.bg-danger Sets the background color to danger
.bg-warning Sets the background color to warning
.bg-info Sets the background color to info
.bg-light Sets the background color to light
.bg-dark Sets the background color to dark
.bg-white Sets the background color to white
.bg-transparent Sets the background color to transparent

Example: Using background color classes

<div class="bg-primary text-white">This div will have a primary background color and white text.</div>
<div class="bg-success text-white">This div will have a success background color and white text.</div>

Bootstrap's color utility classes let you apply colors to your web page elements quickly. By using these classes, you can keep a consistent color scheme in your project without having to specify colors for each element manually.

Contextual Colors

Contextual colors in Bootstrap are predefined color classes that convey meaning through color. These classes provide visual feedback to the user about the state or the nature of an element. Bootstrap includes several contextual color classes that can be applied to text, backgrounds, buttons, and other elements.

Class Description
.text-primary and .bg-primary Indicates an important action or information
.text-secondary and .bg-secondary Indicates a slightly less important action or information
.text-success and .bg-success Indicates a successful or positive action
.text-info and .bg-info Indicates a neutral informative change or action
.text-warning and .bg-warning Indicates a warning that might need attention
.text-danger and .bg-danger Indicates a dangerous or negative action
.text-light and .bg-light Indicates a light background or text color
.text-dark and .bg-dark Indicates a dark background or text color

To apply contextual colors to text, add the corresponding .text-* class to the text element:

Example

<p class="text-primary">This is an important message.</p>
<p class="text-success">This is a success message.</p>
<p class="text-warning">This is a warning message.</p>
<p class="text-danger">This is an error message.</p>

To apply contextual colors to backgrounds, use the .bg-* classes:

Example

<div class="bg-info text-white">This is an informative section.</div>
<div class="bg-light text-dark">This is a light background section.</div>

When using contextual background colors, choose a contrasting text color to maintain readability. In the examples above, .text-white is used with darker background colors, while .text-dark is used with lighter backgrounds.

Contextual colors help convey the purpose or state of an element to the user. By consistently using these colors throughout your website or application, you can create an intuitive and user-friendly interface.

Customizing Colors

Bootstrap's default color palette can be changed to match your project's branding or design requirements. The easiest way to change the color palette is by updating the $theme-colors Sass map.

The $theme-colors map contains key-value pairs, where the keys are the color names and the values are the color codes.

Example: Default $theme-colors map

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

To change an existing color, update its value in the $theme-colors map.

Example: Changing the primary color

$primary: #your-custom-color;
$theme-colors: (
  "primary":    $primary,
  ...
);

To add a new color to the palette, add a new key-value pair to the $theme-colors map:

Example: Adding a new color

$theme-colors: (
  ...
  "custom-color": #your-custom-color
);

After changing the $theme-colors map, you need to recompile your Sass files to apply the changes. If you're using the Bootstrap source files:

  1. Set up your project to compile Sass.
  2. Update the $theme-colors map in your custom.scss or variables.scss file.
  3. Import Bootstrap's Sass files after your custom variables.
  4. Recompile your Sass to generate the updated CSS.

By customizing Bootstrap's color palette, you can create a unique look and feel for your website or application that aligns with your brand identity.

Color Contrast

Color contrast is an important part of web accessibility. It refers to the difference in brightness between the foreground (text or graphics) and the background color. Sufficient color contrast helps people with visual impairments or color vision deficiencies read and understand the content on your website.

Bootstrap gives you color contrast ratio utilities to help you create accessible color combinations. These utilities are based on the Web Content Accessibility Guidelines (WCAG) recommendations for minimum color contrast ratios.

To have sufficient color contrast using Bootstrap classes:

  1. Use the .text-* and .bg-* classes together to create color combinations with adequate contrast.

Example

<div class="bg-dark text-light">
  Dark background with light text
</div>
  1. For text on colored backgrounds, use the .text-black-50 or .text-white-50 classes to improve readability. These classes apply a semi-transparent black or white color to the text, making it easier to read on colored backgrounds.

  2. When using custom colors, test the color contrast ratio using tools like the WebAIM Contrast Checker or the Chrome DevTools Color Picker. Aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

Tip

  • Use a combination of dark text on a light background or light text on a dark background for the best readability.
  • Avoid using colors with low contrast, such as light gray text on a white background or dark gray text on a black background.
  • Be mindful of color blindness when selecting colors. Avoid using color alone to convey information, and consider using patterns, textures, or labels to supplement color distinctions.
  • Test your color scheme with various contrast checking tools and make changes as needed to meet accessibility standards.

Gradients

Bootstrap has gradient utilities that let you add linear gradients to elements. These gradient utilities are available as background classes that you can apply to any element.

Bootstrap has several gradient direction classes:

Class Description
.bg-gradient Applies a vertical gradient from top to bottom
.bg-gradient-x Applies a horizontal gradient from left to right
.bg-gradient-y Applies a vertical gradient from top to bottom
.bg-gradient-directional Applies a directional gradient at a 45-degree angle from bottom-right to top-left

To use these gradient classes, add them to an element along with the .bg-* color utility classes:

Example

<div class="bg-success bg-gradient">
  This div will have a vertical gradient background from top to bottom using the success color.
</div>
<div class="bg-primary bg-gradient-x">
  This div will have a horizontal gradient background from left to right using the primary color.
</div>

If you need more control over the gradient colors and direction, you can create custom gradients using Sass mixins. Bootstrap gives you the gradient-bg() mixin to generate linear gradients:

.custom-gradient {
  @include gradient-bg(linear-gradient(to right, #your-color-1, #your-color-2));
}

This mixin lets you specify the gradient direction and the colors used in the gradient. You can then apply the .custom-gradient class to any element to set its background to your custom gradient.

Example

<button class="btn custom-gradient">
  Button with Custom Gradient
</button>

Gradients can add visual interest and depth to your design elements. By using Bootstrap's gradient utilities and Sass mixins, you can apply gradients to backgrounds, buttons, and other elements in your project.