Quickly make a new theme for your Bootstrap-based starter site with Bootstrap Magic

Apart from changing values of LESS variables, you can change the looks of a Bootstrap-based starter site by creating your own theme with Bootstrap Magic and using the generated theme styles on your site.

1. Go to http://pikock.github.io/bootstrap-magic/app/index.html.
2. Change the values available in the Bootstrap Magic editor as you like.
3. Click "Apply" at the bottom of the page to view the changes.
4. Once finished, click "Save less variables" at the bottom of the page to download the magic-bootstrap.less file.

Now apply the theme to your Bootstrap-based starter website:

1. Copy the magic-bootstrap.less file to ~/Frontend/Styles/bootstrap/
2. Edit bootstrap.less in this folder and add @import "magic-bootstrap.less"; below @import "mixins.less"; like this:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";
@import "magic-bootstrap.less";

When you save the file and refresh your starter site in the browser (F5), it will use the new theme.