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.
"Just don't look 100% like a vanilla bootstrap site."
Unless you're targeting developers or Silicon Valley who cares? Most people couldn't tell you the difference between a Bootstrap site or a non-bootstrap site, even if they could its unlikely they would actually care. As a dev who admittedly sucks at CSS I'll take better looking and clone-like (and cross-browser) over ugly and unique any day.
I agree with you 100% here Jamie. Any non-developer I have shown the bootstap styling to just says it looks very professional, even if it is the 'vanilla bootstrap site'. Admittedly, I do agree that it some customizing should be done since it is very simple, but I wouldn't say changing the button colors is world-changing.
Also, check out oss/bootstrap/docs/download.html#variables a new feature in the docs that makes customizing really easy even for someone who doesn't know CSS!
It just looks like you chimed in to show the negative side, but didn't even check out the new code.
Thank you to anyone who worked on the project, 2.0 is awesome. Responsive design is nailed down, adding and removing components is even easier than before and the docs are awesome. Good stuff here.
I'm trying bootstrap in my latest project, but have to say was surprised the first time I viewed it with IE. Even with IE9 the navbar and buttons look poor. Any advise?
Bootstrap looks better then 95% of sites in internets. Actually I hope that more and more sites will use bootstrap.
I've tired of different look and feel. There are zillions of autocompletes and everyone behaves differently (different animations, keyboard shortcuts and so on).
Even buttons works differently on different sites.
If you look at iPhone or Mac or Windows application they looks the same as other application on particular platform and no one annoyed. Each application use same keyboard shortcuts and controls and frequently share same colors.
There is even UI recommendations for most of the platforms. You could use owner-drawn controls for sure but it usually they are used only if default controls are unsuitable for some task or in games.
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.
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.
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.
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.
Actually, to give credit where it's due, I just downloaded the 2.0 release and it seems like things are much better. Still not at the point I'm describing, but at least the end classes aren't littered with @gray declarations.
Speaking of this, I built a tool using jQuery and Twitter Bootstrap itself that lets you customize the button's hue, saturation, lightness, and "puffiness". You can see it here: http://charliepark.org/bootstrap_buttons/.
True. Clearly their time is divided into doing so many of those themes.
Instead, if they did a (or a few) authoritative themes with compass css with such good documentation as bootstrap and their theme works at all resolutions, I'm sure people will use that one too.
You're advising people who lack design skills to change the colors? How about just advising them to focus on the content and functionality of the site they're building. If they do that, you won't have to tell them to remove the black bar. They'll remove it if it doesn't help the site.
I've found the best use for Bootstrap is internal sites and tools. The public never sees these tools so they are usually stuck with terrible UI and UX. Bootstrap makes these tools so much easier to write.
Everyone survived eons of staring at old Windows application UIs, and this is prettier to look at! Believe it or not, a lot of business users expected their apps to have that boring look or else they might not consider it a full-fledged Windows program. The old Winamp design around the turn of the millenium looked alien in Windows--it looked awesome, but no business users would've considered it to be professional. When you go into a company to knock out some internal apps for them, creating something that gets work done is going to come first, and Bootstrap makes it possible for your app to look decent even when you don't have a designer around.
Once upon a time, smart, thoughtful people thought it was a good thing for different applications to make use of a common set of well thought out UI elements because it allowed users to leverage knowledge across many applications.
Some would say that it isn't a bad thing to have more of that on the web.
Lazy question: is it easy to remove that black bar? I think it's a terrible bit of navigation for "average user" kinds of people, who will easily miss it.
Are you sure people wouldn't have an easier time finding the nav links on your site if they were in a bar? They look a lot like body text to me now, which might be the issue. Have you done any testing?
I think a bar might work and that testing would be the best way to see.
The point about pricing in particular is that there is a huge button in the middle of the page, and people are still not clicking it. My instincts are that a black bar at the top of the screen would be nearly invisible to these people, many of whom are more advanced in their years than the average HN user.
Currently you have no real user feedback on any of your buttons other than cursor change. When a user hovers over a button I would suggest defining a hover state for the button.
As for the "view plans and prices, get started" I believe a smaller button that is better positioned with a hover effect would get significantly better results. Even a simple change such as changing that text to something a little shorter like "Get Started Now", "View Plans" or " View Prices" will get you better results.
Ultimately I believe you would see significant improvements using bootstrap across your site. Some examples of what others have done with bootstrap can be found here http://builtwithbootstrap.com
I agree with this completely - it's too branded and shackles you in development. I am working right now on a solution that gives you the ability to quickly prototype with nice looking styles, but is much more flexible and modular and gets out of your way when you need it. It's going to be a pretty huge project (and will borrow some pieces from bootstrap), but will post when it's done
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.
98% of bootstrap's documentation is about usage of the generated bootstrap CSS, which requires all kinds of presentational markup.
There's a solution for that: use the LESS source. Mixin the various bootstrap classes into the styles you write for your clean, semantic markup. It's a nicer way to work, and it permits removal of almost all the presentational "bootstrap" classes from your markup. With some thoughtfully-structured markup, you can even do away with wrapper divs in many instances.
This isn't without some sharp edges—you have to grasp what the various moving pieces of bootstrap do, and what different mixins you must apply to achieve the desired effect, but it's a cleaner/more powerful approach IMO.
To be clear, I'm glad about the CSS-only approach too because it enables non-designers to get over the suck threshold quickly. Using the LESS is more work at first but it pays dividends in the long run.
At first, I thought that was a poor choice, too. However, <i> has come to mean that something is to be interpreted under a different voice or mood. You are providing augmented meaning. To further color a bit of text with an icon, I think, is in the spirit of the rfc.
Notice, also, that the rfc talks specifically about classifying the alternate meaning, appropriately, with the class attribute.
We've used <i> for icons before. Main reason we started doing it, I seem to recall, was that we needed some sort of element there to make the spritesheeting work easily, and a lone empty <i> is (a) short, (b) extremely devoid of meaning which might be added to it by browsers/readers, and (c) easy to remember when writing markup as i-for-icon.
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?
Bootstrap is kind of aimed for HTML5, and "Font Style Elements" form HTML 4.01 got a new life in this spec (including previously deprecated S and U), with redefined semantics. Using I for icon is still wrong even by new definition.
With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
Thanks for the tip. Even if I never use it anymore, <i> still means italic to me. The thought of using it for icons breaks 15 years of ingrained habit.
Although - the implementations used in Bootstrap could be translated to a more semantic approach by using SASS or LESS mixins instead of classes. This is the approach used by the Susy grid system included with Compass. I see Bootstrap as a open-sourced library of tested cross-browser solutions to a reasonable set of challenges in modern front-end coding. As such I'm hoping it is possible to port a lot of it to a "semantic markup" way of doing things.
Possibly - I won't know until I've played with the code a bit. But it seems to me that Susy has brought a simple but extremely powerful idea to implementing front-end code - instead of using a presentational element and layout-related class names like "row" etc. you can use a semantically-appropriate HTML element and @include your markup via a mixin. The actual CSS implementation can be the same - it's just that it is possible to separate the semantic HTML from the presentational structure (nested selectors with included of mixins as allowed by LESS/SASS) and the CSS implementation in the generated CSS.
I'm afraid I don't quite understand what semantic HTML means. Different people seem to have different ideas about the definition of semantic HTML. Could you point me to some internet resource that explains this stuff?
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.
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?
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.
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.
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.
Zurb and Bootstrap look very similar in many ways. However, bootstrap seems to be growing at a really fast pace and appears to have more elements and javascript plugins than Zurb Foundation.
I think when picking a framework it's important to look at the direction it is taking. In this case Bootstrap is very actively being used in the development community and backed by some really great developers at Twitter.
I did a side-by-side of a simple design when trying to choose one. Bootstrap just has better defaults with things like padding, sizing, and margins. It just looked better.
Now that Bootstrap has responsive design, there's no contest.
I haven't had an experience to experiment with Bootstrap but does it handle nested grids well in fluid (Responsive) layouts? That's one of the things I liked about Foundation is that it handles nested grids well.
Foundation uses <br />s with its form fields (eg. <input><br />, etc), which just makes it annoying to style if you want to style anything ever so slightly out of the box Zurb puts you in.
I went back and checked; it was actually the lack of any wrapping container that was bothering me; <label><input><label><input> etc.
(Unless you're very careful with the styling it gets to be a pain in the bum to include non-standard chunks of markup underneath some elements, particularly if you want to arrange the label on the left and everything else on the right.)
While Bootstrap probably lets you bootstrap (hoho) faster, I still would choose (very subjectively) choose foundation. For one, you would wanna distinguish yourself from all those bootstrap-themed MVPs out there.
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.
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.
One day I plan on comparing all these half-decent frameworks and writing a post about it.. one day.. Here are some others I've found (Note: This is not a full listing, others are old/abandoned so I've omitted them):
I'm not sure I would describe Compass as a CSS framework. Compass and Bootstrap are not the same thing. Compass is a CSS Authoring Framework, and it can be used with boostrap (although it's not yet at bootstrap verison 2):
(from the linked site) I find the notion that a phrase as general as 'responsive web design' could be considered 'coined' in 2010, and could be considered to have such a narrow meaning (i.e. you can't be 'responsive' without a fluid grid). A search on the phrase from Jan 2000 until Jan 2009 returns more than 16 million results.
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
Are you talking about the transitions? If so, they're still included. I think it's just grayed on the plug-ins list because it's required for all the other plug-ins. If you download the full repository (http://twitter.github.com/bootstrap/download.html), bootstrap-transition.js is included.
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.
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
They are different. In months past I have been mashing up components of bootstrap with skeleton (as well as 2 excellent others, golden grid system and frameless by @jonikorpi) in order to have sensible css defaults that work responsively. GGS made some things possible without modification that were very tough to implement in skeleton (like the footer at the bottom of goldengridsystem.com)
You're worried that it's missing some features? Skeleton has no features. It's a grid, some typography, and some defaults. On the other hand, Bootstrap is a complete front-end package. They're very different. Look at Bootstrap's js bundle alone.
Skeleton is nice when you just want some sensible defaults with your responsive grid.
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.
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!
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.
I hope it WILL create a more homogenized web. Seriously, how many different kinds of push buttons do we need. The design creativity can better be applied elsewhere.
It kind of happened with Wordpress and Drupal default themes but the web is too big to go really that way and technology evolves very quickly, so today it's Twooter Bootstrap but tomorrow it will be NewFadCorp Boostrap.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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?
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.