How do you change the colour of Twitter's Bootstrap CSS?

When using Twitter Bootstrap, there are several methods to change the CSS color settings. I will explain each method with specific examples.

1. Using Custom CSS

The simplest and most common approach is to load your custom CSS file after Bootstrap's CSS to override the default color settings.

Example:

Suppose we want to change the button color. Bootstrap's default button class is .btn-primary, which typically uses a blue default color. We can modify this color with the following CSS:

css
.btn-primary {
    background-color: #5cb85c;  /* changed to green */
    border-color: #4cae4c;      /* changed border color */
}

2. Using Sass

Bootstrap 4 introduced support for Sass. Sass enables you to define variables during compilation, which control the entire framework's colors, sizes, and other properties.

Example:

Download the Bootstrap source files, locate the _variables.scss file, and adjust the color variables you need. For instance, to customize all theme colors:

scss
$theme-colors: (
  "primary": #007bff,   /* blue */
  "success": #28a745,   /* green */
  "info":    #17a2b8,   /* light blue */
  "warning": #ffc107,   /* yellow */
  "danger":  #dc3545,   /* red */
  "light":   #f8f9fa,   /* light gray */
  "dark":    #343a40    /* dark gray */
);

Update the values to your desired colors, then recompile Sass.

3. Using Online Customization Tool

Bootstrap provides an online customization tool that allows you to tailor colors, components, and other elements before downloading.

Visit Bootstrap Customization Page to select the variables you need, including colors, and download the customized version.

4. Using JavaScript to Modify Styles

Although it is generally not recommended to frequently use JavaScript for direct style manipulation, it can serve as a viable solution in specific scenarios.

Example:

javascript
document.querySelector('.btn-primary').style.backgroundColor = '#5cb85c';

These are several methods to modify Bootstrap colors. In practical development, we typically recommend using Sass because it enables systematic color management at the source code level and leverages Sass's additional features—such as mixins and functions—to enhance development flexibility and efficiency.