Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.
This question is related to
css
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
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
Bootstrap 4
This is what worked for me:
I created my own _custom_theme.scss file with content similar to:
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
Added it to the top of the file bootstrap.scss and recompiled (In my case I had it in a folder called !scss)
@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
I've created this tool: https://lingtalfi.com/bootstrap4-color-generator, you simply put primary in the first field, then choose your color, and click generate.
Then copy the generated scss or css code, and paste it in a file named my-colors.scss or my-colors.css (or whatever name you want).
Once you compile the scss into css, you can include that css file AFTER the bootstrap CSS and you'll be good to go.
The whole process takes about 10 seconds if you get the gist of it, provided that the my-colors.scss file is already created and included in your head tag.
Note: this tool can be used to override bootstrap's default colors (primary, secondary, danger, ...), but you can also create custom colors if you want (blue, green, ternary, ...).
Note2: this tool was made to work with bootstrap 4 (i.e. not any subsequent version for now).
The correct way to change the default primary colour in Bootstrap 4.x using SASS, or any other colours like secondary, success and so on.
Create the following SASS file and import Bootstrap SASS as indicated:
// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
$primary: blue;
$secondary: green;
$my-color: red;
$theme-colors: (
primary: $primary,
secondary: $secondary,
my-color: $my-color
);
// Add below your SASS or CSS code
// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
Since Bootstrap 4 you can easily change the primary color of your Bootstrap by downloading a simple CSS file on BootstrapColor.net. You don't need to know SASS and the CSS file is ready to use for your website. You can choose the color you want like blue, indigo, purple, pink, red, orange, yellow, green, teal or cyan color.
Any element with 'primay' tag has the color @brand-primary. One of the options to change it is adding a customized css file like below:
.my-primary{_x000D_
color: lightYellow ;_x000D_
background-color: red;_x000D_
}_x000D_
_x000D_
.my-primary:focus, .my-primary:hover{_x000D_
color: yellow ;_x000D_
background-color: darkRed;_x000D_
}_x000D_
_x000D_
a.navbar-brand {_x000D_
color: lightYellow ;_x000D_
}_x000D_
_x000D_
.navbar-brand:hover{_x000D_
color: yellow;_x000D_
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="container">_x000D_
<br>_x000D_
<nav class="navbar navbar-dark bg-primary mb-3">_x000D_
<div class="container">_x000D_
<a class="navbar-brand" href="/">Default (navbar-dark bg-primary)</a>_x000D_
</div>_x000D_
</nav>_x000D_
<button type="button" class="btn btn-primary">Default (btn btn-primary)</button>_x000D_
</div>_x000D_
_x000D_
_x000D_
<br>_x000D_
_x000D_
<div class="container">_x000D_
<nav class="navbar my-primary mb-3">_x000D_
<div class="container">_x000D_
<a class="navbar-brand" href="/">Customized (my-primary)</a>_x000D_
</div>_x000D_
</nav>_x000D_
<button type="button" class="btn my-primary">Customized (btn my-primary)</button>_x000D_
</div>For more about customized css files with bootstrap, here is a helpful link: https://bootstrapbay.com/blog/bootstrap-button-styles/ .
Yes, I'd suggest opening up the .css file, inspect the page and find the color code you want to change and Find All and Replace (depending on your text editor) to the color you want. Do that with all the colors you want to change
Using SaSS
change the brand color
$brand-primary:#some-color;
this will change the primary color accross all UI.
Using css-
suppose you want to change button primary color.So
btn.primary{
background:#some-color;
}
search the element and add a new css/sass rule in a new file and attach it after u load the bootstrap css.
This is a very easy solution.
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
replace the class bg-dark, with bg-custom.
In CSS
.bg-custom {
background-color: red;
}
Bootstrap 5
For bootstrap 5 you can just go to you main scss file and add:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
or whatever changes you wanna make...
And don't forget to import bootstrap right after.
Your final main.scss file should look like this:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
@import "~node_modules/bootstrap/scss/bootstrap";
Most of the answers here are more or less correct, but all of them with some issues (for me). So, finally, googleing I found the correct procedure, as stated in the dedicated bootstrap doc: https://getbootstrap.com/docs/4.0/getting-started/theming/.
Let's assume bootstrap is installed in node_modules/bootstrap.
A. Create your your_bootstrap.scss file:
@import "your_variables_theme"; // here your variables
// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";
// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...
B. In the same folder, create the _your_variables_theme.scss file.
C. Customize the bootstrap variables in _your_variables_theme.scss file following this rules:
Copy and paste variables from
_variables.scssas needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.
Default variables are available in node_modules/bootstrap/scss/variables.scss.
This might be a little bit old question, but I want to share the best way I found to customize bootstrap.
There's an online tool called bootstrap.build https://bootstrap.build/app. It works great and no installation or building tools setup required!
This seem to work for me in Bootstrap v5 alpha 3
_variables-overrides.scss
$primary: #00adef;
$theme-colors: (
"primary": $primary,
);
main.scss
// Overrides
@import "variables-overrides";
// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";
// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";
// Helpers
@import "@/node_modules/bootstrap/scss/helpers";
// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";
@import "custom";
Source: Stackoverflow.com