Introduction:

Bootstrap 5 offers a wide range of colors that you can use to style your website. The latest version of Bootstrap has introduced a new color system based on CSS custom properties (variables) which makes it easier to customize and extend. Here are the default color variables provided by Bootstrap 5:

1. Primary Color: This is the main color used for most elements, such as buttons and links. The default primary color is #0d6efd.
2. Secondary Color: This color is used to complement the primary color. The default secondary color is #6c757d.
3. Success, Danger, Warning, Info: These are contextual colors used for various alerts and messages. Their default colors are:
   • Success: #198754
   • Danger: #dc3545
   • Warning: #ffc107
   • Info: #0dcaf0
4. Light and Dark: These are used for background colors in different contexts. Their default colors are:
   • Light: #f8f9fa
   • Dark: #212529
5. White and Black: These are used as text colors against dark or light backgrounds. Their default colors are:
   • White: #fff
   • Black: #000

These color variables are used throughout Bootstrap’s components and utilities. You can easily customize these colors by overriding the default values in your own CSS or Sass files.