
Bootstrap 2.0, From Twitter - uptown
http://twitter.github.com/bootstrap/?v=2.0
======
VonLipwig
I am going to chime in being negative against the wave of positive feedback
here.

Twitter has done well releasing this and when I first saw it ages ago it
looked neat and fairly professional.

However, like a pop song which has been completely overplayed on the radio it
has become tired and frankly a bit annoying. It has its uses offline to
quickly get a demo up and running but it shouldn't be used on a live site. At
least not in its entirety.

If you have to use this for your project due to convenience or lack of design
skills then do everyone a favor and mix it up a little bit. Change the colors
on the buttons. Avoid the black bar running along the top of your website.
Just don't look 100% like a vanilla bootstrap site.

~~~
scorpion032
Bootstrap is not overused; just under customized.

In all fairness, what this proves is that there is a fairly large market for
such packaged customization themes which are built thoughtfully and work on
all resolutions.

~~~
StavrosK
I have filed a bug that was closed about this very thing. Bootstrap is very
hard to customize because the variable color names are inane. Rather than
define a palette of X many colors and then use that everywhere, bootstrap
defines variables as @gray, @pink, @white, etc. If you want a light-on-dark
layout, you need to redefine @gray as white, which makes no sense.

I proposed names like @primaryColor, @primaryColorLight, @secondaryColor, etc,
but the tickets were closed. Yes, it's a lot of work, but it must be done. If
you can define your four colors and have Bootstrap look entirely different, it
goes a _long_ way to instant customization.

~~~
dminor
That's a shame - this is my main complaint about bootstrap. If you do plunge
ahead and do a bunch of color customization, it also makes upgrading to new
versions a pain.

~~~
danneu
I didn't even notice the LESS variables and built a dark theme in about 20
minutes by cascading over Bootstrap vanilla. Upgrading isn't an issue as long
as you make customizations in a separate file that you simply include _after_
bootstrap.css.

<http://danneu.com/darkstrap/darkstrap.html>

------
sopooneo
Yes, Bootstrap is great. Honestly, I love using it. But where are all the
people that I used to see screeching about semantic markup? Because this takes
things in exactly the opposite direction.

~~~
mrpollo
yeah, like using <i> for icons
<http://www.w3.org/TR/html4/present/graphics.html#edef-I>

~~~
oconnor0
Thanks for pointing that out. That seems like an odd design decision.

Edit: I wonder what motivated it. "i" for images and no one uses it to
italicize text anymore?

~~~
mrpollo
yeah my best guess is that "i" for "icon", it's a good use, from the w3c
"their use is discouraged in favor of style sheets." so I guess it doesn't
really hurt no one, but the purists, or am I wrong?

~~~
intranation
`i` is for "italic", and that quote means that you should be using `font-
style` instead of an HTML element to make your text italic.

------
timmaah
Last week 2.0 introduced me to the world of responsive design. Converted our
current project to it. Higher ups are pleased and it saved me from creating a
second "mobile" site. I am a fan.

~~~
mattdeboard
Yeah I was blown away when another dev converted our foundation site to
Bootstrap, and I saw the width-detection & automatic "mobile-ification"

------
conroy
The coolest new feature? Bootstrap 2.0 is completely responsive. This is what
it looks like on different screen sizes:
[http://areyouresponsive.com/twitter.github.com%2Fbootstrap%2...](http://areyouresponsive.com/twitter.github.com%2Fbootstrap%2F%3Fv%3D2.0)

~~~
nickbarnwell
It may be my slow data connection, but it seems as though AreYouResponsive is
not, in fact, responsive.

~~~
spiralganglion
Here we go, recursion:

[http://areyouresponsive.com/areyouresponsive.com/areyourespo...](http://areyouresponsive.com/areyouresponsive.com/areyouresponsive.com)

~~~
snprbob86
Whoa. That freaked out Chrome in a bad way.

~~~
pierreten
Same here. Latest Chrome build on Lion too.

------
dkharrat
This is awesome! Major improvements since 1.4.

Even though the main use case for Bootstrap seems to be for rapid prototyping,
any thoughts on using it for a production app (but perhaps custom-themed),
instead of rolling a custom design altogether? It seems Bootstrap has matured
to the level that it can be used as for most projects with little
customizations if any. A lot of what I read in the comments imply that
Bootstrap is great at prototyping an app and once that phase is over, you
throw it all out and start developing a custom design based on what has been
prototyped. Why can't one just stick with Bootstrap and customize it as
needed?

~~~
danneu
Why would you think you can't? Once your app conforms to Bootstrap's markup,
you already have a markup/class hierarchy that makes custom styling easy.
There's a blog out there that shows Bootstrap sites in the wild and they're
customized.

I converted my Bootstrap 2 theme into a dark one:
<http://i.imgur.com/qm1iA.png>

I call it... Darkstrap.

------
slewis
Can someone compare and contrast Boostrap 2.0 with ZURB Foundation?

I've been using Foundation for a new project and am really digging the
responsive layout features.

~~~
bobfunk
Bootstrap and Zurb are actually quite different, in my opinion.

Both are based on solid resets and (now) great, nestable, responsive grids.

Bootstrap is great for when you're not a designer and you need to get
something out there that looks passable. It includes a lot of fully styled
elements and have very nice typography and forms out of the box. I found
Bootstrap a lifesaver to get something up at <http://www.eventsourcehq.com>
quickly.

Foundation is great to use as the foundation of a website when you have design
skills or are working with a designer. Using the grids and the defaults gives
you a lot less to think about when getting the rough outline of a website
done, but you won't have to start overriding or deleting a bunch of included
styles once you want to apply your own. We've used Foundation as the base for
our example project template for <http://www.webpop.com> and plan on making
more foundation based templates.

In short:

Bootstrap when you want something styled out of the box. Foundation when you
just want to quickly get the structure and layout going and then apply your
own styles.

~~~
slewis
Thanks! That's the impression that I got from reading a similar thread about
Bootstrap 1. I opted for Foundation because I want to get something reasonable
together for prototyping, but also apply a full design later.

webpop looks awesome by the way.

------
pg_bot
Some other useful css frameworks include <http://blueprintcss.org/> and
<http://compass-style.org/>, if you are interested. That being said, I have
used all three for different projects and have enjoyed working with bootstrap
the most.

~~~
danberger
Having using Blueprint extensively, it's great if you're trying to get a basic
grid going and not much more. It's super lightweight but doesn't offer the
features of Bootstrap.

------
schpet
> With Bootstrap 2, we've gone fully responsive.

This would imply a fluid grid, which it lacks.

[http://www.zeldman.com/2011/07/06/responsive-design-i-
dont-t...](http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-
that-word-means-what-you-think-it-means/)

~~~
huxley
It has an optional fluid grid:

<http://twitter.github.com/bootstrap/examples/fluid.html>

In any case, fixed width layouts which adapt to screen sizes are also
considered a form of responsive design.

~~~
schpet
Oh! Awesome.

------
ericmsimons
Love the new stuff - any reason why you removed the animation effects of
button presses? I always thought that was one of the coolest pieces of
bootstrap

~~~
Griever
I'm curious about this as well. I was checking out the 2.0-wip earlier today
and all of the button animations remained intact.

~~~
ericmsimons
Yeah, I saw it just a day or two ago as well and it was still there. I wonder
if they're removing effects that aren't compatible across all browsers?

~~~
xnxn
The relevant issue/rationale is here:
<https://github.com/twitter/bootstrap/issues/1229>

I'm glad they got rid of it. It made the buttons feel "squishy" and
unresponsive.

~~~
Griever
Ah thanks for the Issue link. I was digging around last night for an official
answer but couldn't find one. Thanks!

------
sunchild
The custom module building I was surprised to find, even though I've been
using the 2.0-wip branch for a few weeks:

<http://twitter.github.com/bootstrap/download.html>

(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)

------
pdk
Has anyone compared this to the Skeleton responsive grid? I like that the
styling on skeleton is more minimalist, but worry that I'm missing on some
features from Bootstrap.

~~~
c_t_montgomery
Seeing that the designer/developer of Skeleton (@dhg on twitter) is a designer
at Twitter now, I'm sure there will be plenty of mash-ups between Bootstrap
and Skeleton.

At least, it gives me something to hack on this weekend :D

------
pacomerh
Bootstrap is great for tools, apps where the functionality is more important
than everything, which is great and I use it. But for regular client websites
where design is crucial (and I'm sure it wasn't meant totally for this) is
almost never usable in my case. Clients want very customized functionality and
looks almost all the cases. So I end up using only a few things. But I'm sure
this wasn't its original purpose.

~~~
minikomi
I guess someone needs to make Bootpolish - a re-skinner for bootstrap
elements.. The responsive grid and well layed out less templates are really
what I see as the heart, so I'm guessing this would be well received!

------
jv22222
My only fear is that widespread use of these kind of pre-designed frameworks
might create a homogenized web.

I understand that you can re-skin but I'm thinking many folks will go with the
pre-built look/feel.

Even so, this is awesome for getting stuff out quickly. Great job.

~~~
ssong
I had similar concerns when I first started noticing bootstrap used on random
websites I encountered. However, I think bootstrap will probably help increase
the lower bound quality of sites while designers pushing the envelope will
continue to do so, without or without bootstrap as a starting point.

------
Brajeshwar
Here is the SASS & SCSS version of Twitter Bootstrap 2.0
<https://github.com/Brajeshwar/bootstrap-sass-scss-compass>

~~~
ch0wn
Thank you! I was looking for this, but it's kind of hard to through the insane
list of forks.

------
jonaslejon
Bootstrap 2.0 + WordPress = #win ? Anyone knows if there is any theme out
there w/ Bootstrap?

~~~
urlwolf
I found two, but they are not worth mentioning. They just copy the graphic
elements instead of using the CSS library. For a WP framework that uses a good
CSS library, see xtreme-one (it uses YAML). This match (general CSS lib +
wordpress theme) is great, I agree.

------
rehack
I had bookmarked this thread and had decided to give bootstrap a try. My other
option was jquery (including jquery UI). I am mainly a programmer and not a
natural designer.

After about a day or so of trying out to move my existing UI (of a fairly
successful app) to bootstrap, I found it a bit limiting in some ways. The
commonest one being to try and change the color of the nav bar.

Also the 'brand' style in Nav bar should support logos too. Perhaps provide a
css code for it.

Also in general there is just one way(albiet good) you can do for all things,
which I also did not like.

In a comparative way, jquery UI themes, give me a better default option over
there. And I can choose a theme from several themes.

Another thing is that many of the bootstrap's components example 'TypeAhead'
are again jquery plugins, for which you get competing options in the Jquery
UI.

I also think, that creators of bootstrap are hurrying up with version numbers.
2.0 is a very aggressive call. In the light of, just a few months back, we
just heard of bootstrap on HN. Opensource versioning has to more trustworthy
than corporate versioning (a recent good example is node.js they are .6xxx .
Jquery itself is still 1.7.xxx)

The above are my brief thoughts after playing with it for a day or so. Hope it
helps somebody.

------
grantjgordon
I use bootstrap as the base for all my new projects for clients. You guys are
fantastic! Thanks for open sourcing such a great project!

------
rolleiflex
I wonder why they have removed sortable tables. Not a hard thing to re-add if
you need it, but why the hassle? I used them a lot as a designer as it is one
of the most appreciated things for my clients from the desktop-application
world who expect it as a given and disappointed when it's not available.

~~~
huxley
In the Google Group, Mark Otto mentioned that he didn't want to have it as a
dependency (it was the only 3rd party plugin) and raised a concern with it
having its own themes.

~~~
rolleiflex
That explains a lot. It also breaks if any of the columns get too narrow.
Rather than dropping the effort to further narrow it, it crushes the text of
the label upwards so you are left with a set of vertically extended labels
where there is ample space.

------
program
I'm very happy to see this new version. I have followed the 2.0-wip branch
since the very beginning. At my company we use Bootstrap for a lot of
different project as a barebone WordPress template with few additions in order
to handle the semantic classes (and id) generated by WordPress.

------
ImprovedSilence
Pardon my ignorance, but could someone give me a rundown of what bootstrap is,
and how it works?

~~~
olh
Pre-made css for design-handicapped people like me and web design framework
for designers.

~~~
taitems
A massive boon for us has been the ability to rapidly prototype UI concepts
for clients. People definitely prefer interacting with tangible objects over
flat wireframes. The more complex the UI paradigm you're trying to represent,
the more likely you should be using the bootstrap.

~~~
CJefferson
That.. hmm.. still doesn't really help me. How do you use it to prototype?

Is there a tutorial somewhere, or someone developing something?

~~~
spudlyo
For me, the Bootstrap-101 videos got me from "wtf do I do with this thing" to
"oh, I get it now". The pacing was a bit slow for me, but overall I got a lot
from the videos.

[http://webdesign.tutsplus.com/tutorials/complete-
websites/tw...](http://webdesign.tutsplus.com/tutorials/complete-
websites/twitter-bootstrap-101-the-grid/)

------
stevanl
On the topic of the responsive design module - when I view my project on an
iPhone/iPad it shows the full screen version of the site, rather than the
mobile version. However, it shows the mobile version on a samsung phone.

Is there a reason for this?

~~~
dhendo
Yes, it is based on media queries on the available screen real estate with
differences as <480, 768, 980 and 1200px.

The phone will pick out the smallest one. Try turning the iPad into the
portrait orientation.

------
Valien
Anyone know if they have a CDN like they did for 1.4? I was using it on a test
site with this link -
<http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css> and it works
fine but didn't see if they have a hosted 2.0 version yet.

------
wallflower
In your opinion, what is the mobile equivalent of Bootstrap or what
combination of JS/CSS packages can function as a bootstrap-type jumpstart?

I have a personal project that uses Bootstrap but it pains me to use it on my
mobile device.

The js templating (loading JSON data into the view) that I do is a necessary
part but I'd be willing to hardcode.

~~~
dmboyd
Depending on what you're after, there's either the native app lookalike :
<http://www.chocolatechip-ui.com/>

or you could go with a collapsible column grid along the lines of
<http://fluidbaselinegrid.com/> where by you have the one code base for mobile
and desktop browsers.

~~~
Ecio78
_Depending on what you're after, there's either the native app lookalike
:<http://www.chocolatechip-ui.com> _

How is it compared to jquerymobile?

------
jlazer
This is great and all, but anyone have a link to the old documentation for
1.4? Don't want to upgrade quite yet.

~~~
ceejayoz
You can view it locally. If you didn't already checkout from Git:

    
    
      git clone https://github.com/twitter/bootstrap.git
      cd bootstrap
      git checkout v1.4.0
      open docs/index.html

------
spung
I've incorporated Bootstrap 1.4 to use its styling (fonts, buttons, etc) but
I'd like to get into the responsive features of 2.0. How exactly does the grid
layout work, how should I layout my content? Which columns should I use and
how would they adapt to changes in device max width? Thanks in advance!

~~~
sunchild
It's pretty much as easy as wrapping the content in .container, .row, and
.spanN tags. The responsive part should take care of itself by collapsing
horizontal elements into vertical arrangements, and adjusting widths to keep
them within the viewport.

There are some edge cases for various components (such as the Bootstrap
navbar) that require some special markup and Javascript to collapse
intelligently.

------
smj2118
I'm a big fan of the js widgets- jquery-ui is starting to look a bit old-
fashioned and the design on the bootstrap widgets looks very clean. If you end
up doing anything very complicated you'll end up fighting the css more than it
helps you but I like that I can pick and choose modules.

------
DannyPage
Glad to see that Bootstrap 2.0 is out. Been following along on the 2.0-wip for
the last couple days and very impressed with the new Responsive Design.

One slight problem (Chrome, Mac OSX Lion): <http://i.imgur.com/SOrUZ.png>

~~~
cobychapple
Your browser is probably loading in the CSS and/or image assets from it's
cache of what Bootstrap v1.4 looked like, thus looking mangled when it runs
the 2.0 HTML structure.

A couple of refreshes (does Chrome have Shift + R for forcing reload without
cache?) should sort it out.

~~~
llimllib
Chrome, annoyingly, has never implemented hard reload.

------
fonzie
While I think Bootstrap is fantastic and helpful, my only worry is
overreliance and under customisation, thus a decrease in creativity.

I would be a little bit sad if every new web app I visited overused Bootstrap
and stuck to that now increasingly popular design.

------
cfontes
I was using 1.4 in my site and will update tonight. God bless you guys :D

------
shocks
Is it just me that's getting a really slow generation time with this? Previous
versions took around 1.2 seconds, while v2 is taking upwards of 4.5 seconds.

------
jacobr
Even if you won't use it for your project, the less source is a great source
for best practices regarding browser quirks and rare rendering bugs.

------
buremba
It would be great if they could work with jquery-ui because the tools that
bootstrap provided also fit jquery-ui.

------
kappaknight
Designing a new project with this... it's literally saving me about 3-6 weeks
worth of work. Thanks @Twitter.

------
ryanjodonnell
Nice! I'll need to upgrade to this ASAP.

Anyone that's already done it - how easy is it to upgrade from 1.4?

------
mgkimsal
they seem to have removed the few sample layouts they had before which you
could copy/paste to start a full page. or am i missing that somewhere on the
site?

~~~
jschuur
<http://twitter.github.com/bootstrap/examples.html>?

~~~
mgkimsal
ummm... yeah - why didn't I see that before?

Thanks!

------
fellars
is it just me that can't find them, or is the documentation on form fields not
included on v2 docs? I know they were there on previous docs.

~~~
nhebb
<http://twitter.github.com/bootstrap/base-css.html#forms>

~~~
fellars
ah, thank you. don't know how i missed that.

------
donapieppo
Nice, but still missing DatePicker...

------
epynonymous
this is like a non-designer's wet dream, i'm soaked.

------
shareme
Been using Bootstrapwip2 for a few days on <http://sharemegithub.com>

I wonder if we can look forward to mustache being implemented in in 2.1?

~~~
davidw
I hope that's not why it's down.

~~~
alextrob
This appears to be the correct link: <http://shareme.github.com/>

------
richardburton
This is awesome. Thank you Twitter.

------
coopersloan
Bootstrap rocks!!

------
JuanCBenavides
Very nice indeed. I will consider Bootstrap for my next project. Very simple
to implement.

------
lostsock
This looks amazing! Can't wait to add this to some of my already-in-the-works
projects. Was hoping you'd release this before I had to launch ;)

------
akazackfriedman
That Kippt site... on Bootstrap... c'mon!!!!

