I've customised my bootstrap.css file and have now realised this may cause problems next time bootstrap releases an update - what's the best way to solve this problem without losing all my work?

Question

I've customised my bootstrap.css file and have now realised this may cause problems next time bootstrap releases an update - what's the best way to solve this problem without losing all my work?

2 Answers

Answer Question

Answer 1

Even if you were to add all your changes back into LESS and compiled LESS into CSS; if bootstrap were to have an update you would most likely lose all your changes. Some bootstrap updates (v1 to v2) change class names, so losing your changes would be the least of your problem if they had renamed class' you were using.

Generally you wouldn't be upgrading bootstrap every time an update came out unless it were a bugfix for the current version. You would build your site on the version that is out and leave it at that until you have a redesign or a refresh.

My advise on future use of bootstrap would be to add your custom css to the end of the bootstrap CSS / LESS file, or create your own CSS file that you include after your bootstrap CSS in the head of your HTML. You will then be overriding the bootstrap styles and making your own that take precedence, this is called specificity and is your best friend in customizing CSS libraries.

If you have two style declarations on the same element, the last one that is defined will be used over the previous.

p { color: red;font-size:17px; }

p { color:blue; }

The above is an example of specificity, the p tag will be have blue text and be 17px. This is because we have overridden the color property, but we still use the font-size property from the previous declaration because we haven't overridden that property.

Answer 2

I'm rather new to bootstrap but from doing a little digging it seems that there are a number of ways to get round this rather common (and annoying) problem!

Updating your customised bootstrap.css file.

The first way to get round this irksome problem is to download something called the less.js file. This allows you to write leaner code and can also solve this problem.

After you've downloaded less.js then include it (along with bootstrap) in your <head>.
To recompile your less.js files save and reload the page. Less will save them in local storage.
Or if you wish, you can compile a whole new bootstrap.css with your customisations by running the following command (you will need to have the less command line tool installed via node):
$ Lessc ./less/bootstrap.less > bootstrap.css

Luckily, there is plenty of support out there for bootstrap, so usually solutions can be found for any problem that you may have whilst developing your website.