Twitter Bootstrap

Not to take anything away from a really nice contribution by Twitter's team, but know that stuff like this in tens of different variations are available for tens of dollars at sites like ThemeForest.<p>A typical "admin" theme has some variant of the 960 grid, nice forms and buttons, drop-down navs, tabs, and accordions, and multiple layouts.<p>The templates won't be as well documented as this one, and they'll be more brittle and probably more poorly coded... but they'll only take an hour or two of additional work to (say) Hamlize and bring into your Rails project. They'll look more distinctive than Bootstrap. They'll have better browser compatibility.<p>Unless you're crazy enough to be selling web apps to web developers, no customer of yours is ever going to know or care which of these things you started out with.<p>Or, use Bootstrap; it's really nice. I'm just saying you have lots of good options.

Any clue what the browser compatibility is like, and how well it holds together in older browsers?<p>All they say is "only modern browsers in mind" -- but I see no details about that.<p>If it holds together sans pretty effects that's fine.

What is the relationship between this and Bootstrap.less (<a href="http://www.markdotto.com/bootstrap/" rel="nofollow">http://www.markdotto.com/bootstrap/</a>), other than it appears to be by the same person? What about Skeleton (<a href="http://www.getskeleton.com/" rel="nofollow">http://www.getskeleton.com/</a>)? Are they just 3 different visual approaches to the same problem, or is there an evolutionary progression among them?

All it needs is for that grid to be responsive using CSS media queries, and that will probably be the last CSS toolkit I'll ever need. I have my own internal boilerplate one that I use, but it's nowhere near as refined.<p>Bravo to the Twitter dev(s) responsible for this. You probably just saved me hundreds of hours of future work and frustration.

Gorgeous as it is -- I just can't use something that utterly breaks IE7,8. I wish the realities of browser support were different.<p>Nice contribution in any case.

For a developer like me, that doesn't have a lot of time to sharpen UI skills, this is amazing.

I only recently started learning HTML and CSS so I was wondering if there is a good resource for learning how to use grids.<p>I don't exactly understand how to use grids (or even why). Is it for visual consistency or is there an underlying usability/maintainability benefit to using grids?

Classes and ids should describe the data that you are marking up, and not the structure of the view. It is really hard to continue to work with something like this. It increases the number of classes on each element and causes the developer and designer to fight over which classes go where. Now we have separate classes for style and functionality.<p>If we describe the data then it is easy to describe the view of that data in different ways, and with the same html.

This is great, but I'm afraid I will be forking and adding SASS/SCSS support.

I've been looking at Blueprint and Skeleton but this looks like a better option.<p>If I'm not a LESS user am I going to feel second class?

It's a bit of a shame that the "just hotlink the css" thing doesn't actually work very well - it actually means that some parts won't function (such as the Dropdown menu). My partner and I have just spent the better part of half an hour trying to work out why this didn't work (the documentation didn't mention any javascript necessity).<p>Docs could use some serious clarification - which parts are CSS-only and which require what js files.

Looks pretty nice. But how did this come out of twitter? I haven't seen half of these elements on twitter.com.

Just used it today with my new 1x52 project: <a href="http://jambx.com/" rel="nofollow">http://jambx.com/</a> - Twitter for song lyrics.<p>I'm doing some sort of new web project once a week, for hopefully a year. Writeup on my blog about it: <a href="http://kguac.com/2011/08/1-x-52-week-4-jambx-twitter-for-lyrics/" rel="nofollow">http://kguac.com/2011/08/1-x-52-week-4-jambx-twitter-for-lyr...</a>

This seem like a perfect addition to a hackathon toolkit :) I'll definitely use it.<p>Random rant: Why do they call it "Twitter bootstrap"? IMO that kind of association is a little vain. Rails isn't called 'Ruby on 37Signals'. Besides, it's slightly confusing because it seems to have little to do with Twitter.

It would be awesome if there was a forked Django/Rails/Sproutcore framework with tight integration with something like Twitter Bootstrap.<p>That way you would have a super awesome looking app right from the start.<p>The pros can work on the lean frameworks while the lazy ones like me can hop onto the shoulders of the giants ;-)!

This is absolutely interesting and amazing to see. There's a lot of good elements and style in here. I think this is a great effort and movement forward to help bring a "standard UI" library to the web. I think there's a good use case of websites starting to have a more "locked in" UI/Look &#38; Feel. I'm not convinced by this notion but it's something I've been thinking about lately.<p>Either way, this is a great library for bootstrapping your web-app.<p>I do have some qualms though, but this is due to the limitation of CSS. You really should start practicing separation of content from presentation. It's great to see them leverage LESS but I'd like to see this integrated with SASS/Compass.<p>I'll probably convert it over and release the link on hacker news when ready.<p>* the stuff that's really cool is forms/modal/navbar/tips

Wow nice, great to see them writing off outdated browsers.

Would love this if it used SASS

Looks very well made, I'm using it next week already for a small project :)<p>The IE incompatibility is a shame, this could be a nice poster for progressive enhancement.

Is the site <a href="http://twitter.github.com/bootstrap/" rel="nofollow">http://twitter.github.com/bootstrap/</a> using Bootstrap? When view on iPhone, there is a thin white margin for the right border. This white border stays even if you double tap on the screen, which normally means the site will expand to fill.

I tried integrating this with the html5-boilerplate project as that might improve the cross-browser compatibility. It seems doable. Most tweaks seems to be related to the css reset part as they differ a lot. (Newest h5bp uses normalize.css vs Eric Meyer CSS reset.)

Thank you so much for that framework. I just started implementing it in my latest app. Looks great! I'm struggling a bit with the modals implementation, but I'll get it to work.

This is fantastic. Google created a stylesheet like this once, a while ago, that was extremely lacking when it came to real-world actions and layout. This is incredible.

Why less, why not sass?

As a solid developer who lacks real design skill I thank you guys for building this. Having a clean looking app is key when showing off new ideas.

I'm always happy when I see a big company releasing really nice stuff as free software, and that's the case. Congrats Twitter!

Would love a stylus version to use with nodejs

Nice work and thanks for contributing. Look forward to trying this out on a future project I'm working on.

What I don't get is why browsers don't come with good looking typography settings by default.

I really like Bootstrap as a tool to create a MVP. Will definitely be using it soon!

I love this, good on Twitter for realising this. Making the web more beautiful.

Why and how it is better than YUI? Because it is from Twitter? ^_^

Thanks, Twitter!

wow, this is interesting. What a contribution.

It's such a bless for programmers.

This looks very cool... we need richer frameworks to standardized web dev!