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

You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/

Hope that helps you get started!

Answer 2

I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.

Answer 3

There is a quick way to do it, using composer in your theme:

composer.json

{
        "config": {
                        "component-dir": "lib/composer",
                        "vendor-dir": "lib/composer",
                        "bin-dir" : "bin/composer",
                        "cache-dir" : "var/cache/composer"
        },
        "require": {
                        "twitter/bootstrap": "3"
        }
}

Note: I removed the other composer's section and requirements and phing integration to reduce complexity.

Execute

 composer install

And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences

    $bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';

    wp_enqueue_style('sindy_bootstrap', $bootsUri); 

et voilà! :)

Answer 4

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.