*blows dust off of blog* Hey! There’s a blog here! Let’s start using it again.
Let’s fire up Visual Studio 2010 Express and create the very standard MVC3 startup project:
OK, so now we have a project. Let’s head on over to the Twitter Bootstrap site and download a ZIP of all the good stuff:
Unpack that, and we have three folders: img, css, and js. I’m just going to drop the img and css folders straight into “content” – I scanned the CSS and noted that it wants the img folder to live in a side-by-side directory, so this just makes it easier. I dropped the bootstrap.js file into scripts:
You’ll also noticed I snagged jQuery 1.7.1 – I pulled this in via NuGet (a topic for another post).
So now what? Does it just work? Is it magic! Yes! Wait…
OK so that looks like crap. What went wrong? I thought you said this was easy?! I hate your blog!
So now that you’re using this (or any other) bootstrap “template” of styles, you’ll have to make sure your HTML uses all the expected style classes in the right places. Microsoft’s default “Site.css” that comes in the basic MVC startup project likes things one way, which is clearly not the way Bootstrap from Twitter likes it.
I spent a couple minutes rearranging the main Razor layout. Ta-da! Underwhelming, but still, it proves that you can get up and running really quickly:
And here’s the code in case you’re following along:
Please go and mess around on their site to see all the awesome things that you get for free with this – fancy alert messages, modals, list navigation, fluid layouts. And you can even fork the project yourself on GitHub and take it any direction you like.