Using Twitter Bootstrap together with Wordpress

Question

How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I\'ve already worked with Bootstrap, but now I want to use these two together f

Answer 1

There will be a few ways to tackle this, but here's what I've been doing...

1. Take a copy of your favorite starting point theme
2. Download the full bootstrap repo (less and everything) and pop it into your theme folder.
3. Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
4. Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code @import url("bootstrap/css/bootstrap.css");
5. You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
6. It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
7. Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.

It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.

Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.