hex codes of bootstrap colours with code examples

Bootstrap is one of the most popular front-end frameworks in use today. One great feature of Bootstrap is its extensive library of pre-styled colors. These colors are easily incorporated into your web development projects using hexadecimal codes, or hex codes. In this article, we'll take a look at the hex codes of Bootstrap colors with plenty of code examples to help you get started.

Background on Hexadecimal Color Codes

Before we dive into the colors themselves, let's briefly go over what hexadecimal color codes are. Hexadecimal color codes, or hex codes, are a way of representing colors in digital form. Each color has a six-digit code, made up of a hash symbol (#) followed by six letters or numbers. The first two digits represent the red value of the color, the next two represent green, and the final two represent blue. These values range from 00 to FF, with 00 representing no color and FF representing the strongest intensity of color.

Bootstrap Color Themes

Bootstrap has six predefined color themes: primary, secondary, success, info, warning, and danger. Each color theme has its own hex code, which we'll cover below.

Primary Color

The primary color theme is used to denote the most important action on a web page.

Hex Code: #007bff

Here's an example of how to use the primary color in your CSS code:

button {
    background-color: #007bff;
    color: #fff;
}

Secondary Color

The secondary color theme is used to denote secondary actions or to complement the primary color.

Hex Code: #6c757d

Here's an example of how to use the secondary color in your CSS code:

button {
    background-color: #6c757d;
    color: #fff;
}

Success Color

The success color theme is used to indicate a successful action.

Hex Code: #28a745

Here's an example of how to use the success color in your CSS code:

button {
    background-color: #28a745;
    color: #fff;
}

Info Color

The info color theme is used to denote information.

Hex Code: #17a2b8

Here's an example of how to use the info color in your CSS code:

button {
    background-color: #17a2b8;
    color: #fff;
}

Warning Color

The warning color theme is used to indicate that an action may have unintended consequences.

Hex Code: #ffc107

Here's an example of how to use the warning color in your CSS code:

button {
    background-color: #ffc107;
    color: #fff;
}

Danger Color

The danger color theme is used to denote an action that may be potentially harmful.

Hex Code: #dc3545

Here's an example of how to use the danger color in your CSS code:

button {
    background-color: #dc3545;
    color: #fff;
}

Other Colors Available in Bootstrap

In addition to the color themes above, Bootstrap also includes a number of other colors that you can use in your web development projects. These colors include:

Gray: #adb5bd
Gray-Dark: #343a40
Primary Light: #c8d6e5
Secondary Light: #d6d8db
Success Light: #e2efdb
Warning Light: #fdf4cd
Danger Light: #f8d7da

Here's an example of how to use the gray color in your CSS code:

button {
    background-color: #adb5bd;
    color: #fff;
}

Conclusion

One of the great features of Bootstrap is its extensive library of pre-styled colors, all of which are available through their corresponding hex codes. By using these hex codes in your CSS code, you can easily incorporate these colors into your web development projects. With the information presented here, you should have a good idea of how to get started using Bootstrap's colors in your own projects.

here are some expanded explanations and examples of the earlier topics:

Background on Hexadecimal Color Codes:

Hexadecimal color codes offer a digital way of representing colors. In the code format, each color would have a six-digit code that is represented with a hash symbol followed by six digits or letters which are further divided into sets of two for red, green and blue values. Hex codes are commonly used in web development as they offer a wide range of color options, which can be easily manipulated to create new colors.

To write colors in their hex code, you can use the shorthand notation if any of the two digits are the same, otherwise, it is important to use all six digits. For instance, #ff0000 represents pure red color, while #f00 represents the same color in its shorthand notation.

Bootstrap Color Themes:

Bootstrap has six predefined color themes which developers commonly use to create websites. These color themes are:

• Primary
• Secondary
• Success
• Info
• Warning
• Danger

Primary Color:

The primary color theme is typically used for the most important actions on a web page. Its color code is #007bff, which is a shade of blue. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-primary">Click me!</button>

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

Secondary Color:

The secondary color theme is used to support the primary color or to show secondary actions. Its color code is #6c757d, which is a shade of grey. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-secondary">Click me!</button>

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

Success Color:

The success color theme is typically used to show a successful action. Its color code is #28a745, which is typically a shade of green. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-success">Click me!</button>

.btn-success {
  background-color: #28a745;
  color: #fff;
}

Info Color:

The info color theme is used to provide information or data. Its color code is #17a2b8, which is a shade of blue-green. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-info">Click me!</button>

.btn-info {
  background-color: #17a2b8;
  color: #fff;
}

Warning Color:

The warning color theme is typically used when there is a possibility of unintended consequences. Its color code is #ffc107, which is typically a yellow color. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-warning">Click me!</button>

.btn-warning {
  background-color: #ffc107;
  color: #fff;
}

Danger Color:

The danger color theme is typically used when there is a likelihood of harm. Its color code is #dc3545, which is a shade of red. A typical example of how to use it in HTML and CSS code is:

<button class="btn btn-danger">Click me!</button>

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

Other Colors Available in Bootstrap:

Apart from the six Bootstrap themes mentioned above, there are other colors that you can use in your web development projects. These colors include:

• Gray: #adb5bd
• Gray-Dark: #343a40
• Primary Light: #c8d6e5
• Secondary Light: #d6d8db
• Success Light: #e2efdb
• Warning Light: #fdf4cd
• Danger Light: #f8d7da

Here is an example of how to use the gray color in HTML and CSS code:

<button class="btn btn-primary">Click me!</button>

.btn-primary {
  background-color: #adb5bd;
  color: #fff;
}

In conclusion, Bootstrap provides a wide range of color themes and other colors that you can easily incorporate into your web development projects using their corresponding hex codes. By using these hex codes, you can change colors, mix and match with other colors to achieve the desired results.

Popular questions

1. What is a hex code?
   Answer: A hex code is a way of representing colors in digital form. It is a six-digit code made up of a hash symbol (#) followed by six letters or numbers that represent red, green, and blue values.

2. How many predefined color themes does Bootstrap have?
   Answer: Bootstrap has six predefined color themes, which are primary, secondary, success, info, warning, and danger.

3. What is the hex code for Bootstrap's primary color?
   Answer: The hex code for Bootstrap's primary color is #007bff.

4. Can you use other colors in Bootstrap besides the predefined color themes?
   Answer: Yes. Bootstrap provides a range of other colors that you can use besides the predefined color themes.

5. How do you incorporate Bootstrap's colors into your web development project using hex codes?
   Answer: In your HTML and CSS code, you can reference the desired Bootstrap color class and set its background-color and color properties to the corresponding hex code. For example, to use the primary color, you can define a button with the class "btn btn-primary" and set its CSS properties like this:

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

Tag

ColorPalette