How to Customize Bootstrap Colors

  • read
How to 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.

Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn

Category: Tutorials
Tags: ,

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?