How to Change the Bootstrap Primary Color

How to change the bootstrap primary color?

Bootstrap 5 (update 2021)

The method is still the same for Bootstrap 5.

https://codeply.com/p/iauLPArGqE

Bootstrap 4

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

---

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://codeply.com/go/lobGxGgfZE

---

Also see: this answer, this answer or changing the button color in (CSS or SASS)

---

It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.

Overriding Bootstrap 5 colors doesn't change btn color classes

Make sure you @import Bootstrap after the custom.scss. This will let your changes override the theme color !defaults in Bootstrap variables.scss (referenced in bootstrap.scss).

/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

React on Codeply

Also, note the article is unnecessarily re-building the theme-colors map which isn't necessary unless you're adding a new theme color variant ie; $accent.

Also see: Unable to override $theme-color in bootstrap

Bootstrap: setting custom colors

You can overwrite bootstrap styles by adding "!important;"
For example in your html you might have something like this:

<button type="button" class="btn btn-primary">Primary</button>

You can change the color like this:

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule. For more information you can go here.

If this answer does not work with your given situation, I would suggest looking into Bootstrap Theming. Documentation explaining how to customize Bootstrap 4 and modify existing colors can be found here.

How to change the primary color of the react built-in bootstrap?

To customize Bootstrap, create a file called src/custom.scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.
Bootstrap's documentation: https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables

For example:

// change the theme
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

Finally, import the newly created .scss file instead of the default Bootstrap .css in the beginning of your src/index.js file, for example:

import './custom.scss';

Read more:
https://facebook.github.io/create-react-app/docs/adding-bootstrap#using-a-custom-theme

How to change btn color in Bootstrap

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

1. Create your own customized version of Bootstrap using Bootstrap's online customization tool
2. Manually create your own color class, e.g. .btn-whatever
3. Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

How to change bootstrap primary color to linear-gradient?

The problem is that linear-gradient is used for background-image, not foreground color. When the SASS compiler attempts to build Bootstrap it can't use the darken(..) function on a background-image.

Instead you can just change the primary color for the elements that have a background like this...

.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
    background-image: linear-gradient(to right, #373b44, #4286f4);
}

https://www.codeply.com/go/XXUxFr6tEZ

Dash Bootstrap Components: Replace primary color across components

If you could add a css file I would go with that approach. Then you could simply overwrite the primary styles.

But since you indicated that isn't an option, you could create a wrapper function for your button that sets a default background color style:

MWE

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


def CustomButton(*args, **kwargs):
    default_color = "green"
    default_color_light = "lightgreen"
    default_color_dark = "darkgreen"
    kwargs.setdefault("style", {"background-color": default_color, "background-image": "-webkit-gradient(linear, left top, left bottom, from(lightgreen), to(darkgreen))"})
    return dbc.Button(*args, **kwargs)


app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.layout = html.Div(
    [
        dbc.Button("Primary", color="primary", className="me-1"),
        CustomButton("Primary", color="primary", className="me-1")
    ]
)

if __name__ == "__main__":
    app.run_server()

This only sets default values so you can overwrite the color by setting the style property. If you don't want the gradient by default you can remove the background-image part from the setdefault call.

Update

Alternatively you could overwrite the styles with css by Customizing Dash's HTML Index Template.

The SPACELAB styles define a --primary css color variable, but it annoyingly doesn't use this variable anywhere. Different elements also might change the color in different ways so I don't think there's an easy catch-all way to do this. But you can use the following approach and add styles to it until it is as you want it to be

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.index_string = """
<!DOCTYPE html>
<html>
   <head>
       {%metas%}
       <title>{%title%}</title>
       {%favicon%}
       {%css%}
       <style>
           .btn-primary {
              background-image: linear-gradient(red, blue);
           }
           .custom-control-input:checked ~ .custom-control-label::before {
              border-color: red;
              background-color: red;
           }
       </style>
   </head>
   <body>
       {%app_entry%}
       <footer>
           {%config%}
           {%scripts%}
           {%renderer%}
       </footer>
   </body>
</html>
"""

app.layout = html.Div(
    [
        dbc.Button("Primary", color="primary", className="me-1"),
        dbc.Checklist(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
            value=[1],
            id="switches",
            switch=True,
        ),
    ],
)

if __name__ == "__main__":
    app.run_server()

---

Related Topics