A common Bootstrap customization request is changing the default color scheme. You have a few options depending on how you are using Bootstrap in your project.
1. Link to CDN – Find and Replace Colors
If you are linking to a pre-compiled version of Bootstrap I recommend looking at the raw source and using search and replace in your code text editor to replace all of the color values. Then save this new stylesheet in your project folder and link to your customized version instead of the CDN version.
If you are worried about missing future updates and having to repeat the process each time. You could follow the same steps as above but delete everything except your color changes. It will take some cleanup work but now you will have a new file you can call “bootstrap-color.css” that only contains your new color declarations. Then link to the new stylesheet after the CDN version to override the default colors.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <link rel="stylesheet" href="css/bootstrap-color.css" >
2. Compiling Source – Update Sass variables
For more control I recommend using the Source files and updating the Bootstrap color variables. Then convert your SCSS to CSS using your build process. If you are new to SCSS and want to learn how to compile a custom version of Bootstrap check out my course that covers this topic in more detail.
$gray-base: #000 !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: #67655D; // #333 $gray: #B74934; // #555 $gray-light: #AA9A66; // #777 $gray-lighter: #A8A8A1; // #eee $brand-primary: #577492; // #337ab7 $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default;
3. Hybrid – Use an Online Build Tool Like PaintStrap
PaintStrap is an online tool that lets you load in or edit an existing color scheme then save out the necessary CSS files. This tool is essentially a hybrid approach of my previous customization options. The only thing I don’t like is how you are dependent on a third-party to keep the code up to date. Compiling your own version like option 2 above ensures you are always referencing the latest code. Try PaintStrap.
