How to Customize Bootstrap Colors

  • Updated on
  • read
  • Add to Flipboard Magazine.

customize bootstrap colors

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.

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.

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.


Advertise Here

Written by: Jacob Lett - Jacob started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Tutorials
Tags: ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Bootstrap 4 books - learn responsive web design for beginners

Want a Bootstrap Reference Book?

Learn More

Advertise Here