What is the correct way to customize a Bootstrap theme?

Question

I want to use a Bootstrap theme, but I need customize it. What is the correct way? Should I create a new CSS file to override the default CSS?

Answer 1

I just wrote a post about how I've been doing it at Udacity for the last couple years. This method has meant we've been able to update Bootstrap whenever we wanted to without having merge conflicts, thrown out work, etc. etc.

The the post goes more in depth with examples, but the basic idea is:

• Keep a pristine copy of bootstrap and overwrite it externally.
• Modify one file (bootstrap's variables.less) to include your own variables.
• Make your site file @include bootstrap.less and then your overrides.

When it comes time to upgrade your bootstrap, you just swap out the pristine bootstrap copy and everything will still work.

Here's the post with walk-through.

Code example on github is here.