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.
There are two ways you can go to
http://getbootstrap.com/customize/
And change the color in this adjustments and download the bootstrap customized.
Or you can use sass with this version https://github.com/twbs/bootstrap-sass and import in your sass assets/stylesheets/_bootstrap.scss but before import this you can change the defaults variable colors
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff !default;
//** Global text color on `<body>`.
$text-color: $gray-dark !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
And compile the result