Q:

How can I customise Bootstrap without losing the changes?

I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow: 

Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build

The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less. 
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB? 

A:

you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
//import custom-variables after variables so the values will override.
@import "custom-variables.less"; //only has variables that have changed.
@import "mixins.less";

IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower

