Bootstrap Color Classes and Utilities: Complete Reference

Bootstrap provides a comprehensive color system with utility classes for text, backgrounds, borders, and more. Master these utilities to build beautiful, consistent interfaces quickly and efficiently.

Bootstrap Color Palette

primary

#007bff

secondary

#6c757d

success

#28a745

danger

#dc3545

warning

#ffc107

info

#17a2b8

Text Color Classes

Basic Usage

.text-primary.text-secondary.text-success.text-danger

Opacity Variants

.text-primary-emphasis.text-secondary-emphasis

Utility Classes Reference

Background Colors

.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info

Border Colors

.border-primary.border-secondary.border-success.border-danger.border-warning.border-info

Link Colors

.link-primary.link-secondary.link-success.link-danger.link-warning.link-info

Customization Techniques

SCSS Variables

$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;

// Custom colors
$custom-colors: (
  "purple": #6f42c1,
  "pink": #e83e8c
);

CSS Custom Properties

:root {
  --bs-primary: #007bff;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
}

.custom-theme {
  --bs-primary: #8b5cf6;
  --bs-secondary: #64748b;
}

Conclusion

Bootstrap's color utilities provide a solid foundation for consistent, accessible design. By understanding these classes and customization techniques, you can build beautiful interfaces quickly while maintaining design system principles.

Remember to always consider accessibility when using colors, test contrast ratios, and maintain consistency throughout your project. Bootstrap's semantic color naming helps ensure your design intentions are clear and maintainable.

Bootstrap Color Classes and Utilities: Complete Reference