Bootstrap, from Twitter: How to get your website’s style off the ground

*blows dust off of blog* Hey! There’s a blog here! Let’s start using it again.

Thinking about writing a website? Got a cool idea but know your web design evokes 90’s-era Geocities pages? Well, you (and I) are in luck, friends. There are tons of “bootstrap” styles that you can snag out there that consist of some basic JavaScript and CSS, but I want to highlight one that I have used both privately and professionally: Bootstrap, from Twitter. Amusingly, as I sit down to write this, they’ve actually pushed a major update that’s changed the basic structure. So, we’ll be learning together.

Let’s fire up Visual Studio 2010 Express and create the very standard MVC3 startup project:

VS2010 New MVC3 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:

Bootstrap from Twitter

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:

Solution Explorer for Twitter Bootstrap MVC

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…

Untweaked Twitter Bootstrap MVC

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:

Fancier Twitter Bootstrap MVC

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.

Have fun!