Bootstrap 3 released | Hacker News Reader

Bootstrap 3 released

blog.getbootstrap.com

469 pointstrumbitta2124 comments

> "With v3, we've gone flat. Don't call it a trend—it's all about customization, folks."

I hope everyone catches that part of the post. It's very important, I think, based on the previous HN thread comments.

I've been quite surprised at how many people are in an uproar about v3 being flat. People have been saying things like "it's a dumb trend", "horrible UX", "so ugly", etc. For a skeleton starter template like this, flat is good. Having the design flat encourages you to build on it or theme it to your OWN style so all of the sites using Bootstrap don't end up looking the same (like they have in past versions). It was also annoying in past versions when you had to declare no gradients, or reverse engineer things to lose the "default theme". Making it flat now allows you to build up, where past versions made you go backwards first, then build the theme the way you wanted. I hope more people realize that rational now they have specifically called it out.

With that said, well done everyone that helped on the project! Great work! :)

> Having the design flat encourages you to build on it or theme it to your OWN style so all of the sites using Bootstrap don't end up looking the same

I don't want to build on it. My customers don't care that it looks like other sites, they just want something that looks professional and is easy to use, something which Bootstrap 2 does way better than I could do alone, and for which I am eternally grateful.

My customers range from a little to really non technical, so I think that "making them think" about what might be a button and what might be a label is a regression.

So if I want to upgrade, it's not just "encouragement" to customize, it's a necessity, and I consider it added work since I did not have to do it with the previous version of Bootstrap.

Hopefully, the theme mentioned in the article will suit my needs.

> With that said, well done everyone that helped on the project! Great work! :)

I can agree with that! I am very thankful for Bootstrap.

I completely understand what you are saying, and they have already solved your problem. You can still easily grab the V2 theme to lay on top of V3 to generate all those pre-done styles. The beauty is that it's no longer forced in V3 for people that do want to build up, like it was in V2. It's a win-win! ;)

As tsurantino said in another comment, see here: http://getbootstrap.com/examples/theme/

Yeah, it's probably good enough, although it still seems kind of flat-ish:

http://getbootstrap.com/2.3.2/base-css.html#buttons compared to http://getbootstrap.com/examples/theme/

It was kind of them to make the extra effort though, for those of us who are happier with the older look and feel. Just a bit more like actual buttons, and it'd be perfect.

The button gradients are toned down a little, but they're still there. It's still closer to the v2 style than it is to flat.

The gradients are more subtle in that theme. You could always stick with v2 if that works for you and your users. It's a starter template so it's not something that you must upgrade (unless you need support but I'm sure v2 is pretty solid by now).

Honestly, the differences look fairly indistinguishable to me.

>I don't want to build on it

Well then, get a theme. That's the point of something that's meant to be a framework. You're not the only person using it and it's easier for you to download a theme than it is for people that don't use it as-is to reverse engineer the whole thing.

Well, if you dont want to customize you may well just use one of the themes that will soon spring up. Maybe these will help http://bootswatch.com/

In fact, Bootswatch already supports v3, and for themes that support both, it handles that appropriately too.

The theme mentioned in the article seems to be keeping around the "faux-3D" concept of the look and feel with Bootstrap 2.x and below. So I think you're in the clear. Incidentally, you shouldn't need to worry about upgrading because it seems as though even with this "flat" approach, Bootstrap is still relatively easy to look at and defines borders/sections relatively obviously.

I'm personally a big fan of the opens-as-you-scroll sidebar navigation. Really cool for single-page apps!

they said they will ship v3 with a v2-ish look example.It's already there if you check the example theme.

http://getbootstrap.com/examples/theme/

You can just stick to v2, you know?

And v3 will come with a v2 template.

Seriously, no. I don't care what the rationale is, compare these two pages:

http://getbootstrap.com/ http://getbootstrap.com/2.3.2/

The first is infinitely more confusing to the eye. There's no heirarchy; I don't know where to look. The second is clean while still giving me a sense of where I need to go to accomplish what I'd like to accomplish.

Both pages show the exact same content with relatively small positioning changes. For me, however, the new version is definitely more pleasant to look at.

That being said, Bootstrap is supposed to be a starting point, not the final style. Going flat means less work for us developers when we start styling their components.

I agree with this completely. Before v.3 I was forced to turn to Designmodo's Flat UI just so I could do simple things like changing the color of the navbar without also tackling a million different gradients and effects (granted I'm not a designer or developer).

Try going past the front pages:

http://getbootstrap.com/getting-started/

http://getbootstrap.com/2.3.2/getting-started.html

The low-contrast trend is really being shown here. I don't get why it's so popular. We've got left navigation with grey text on a grey background, no borders, no underlines indicating that they are link. The top bar is purple, with a purple hero board just below it. It's low-contrast city... and I have no idea where my eye should go.

Bootstrap 3 looks old and Bootstrap 2 looks new.

I'm no web designer, just a developer with a casual interest.

Can you explain what this low-contrast thing is all about? Why would anyone think this was a good idea, except perhaps for UI elements that were explicitly disabled.

An overreach of form over function. Looks Apple-ish, but some just take that to the extreme and sacrifice readability.

Concerned web devs are trying to raise awareness about it:

http://contrastrebellion.com/

I can't speak for every designer, and it is possible that the shift is entirely a visual trend based on rebelling from the past trends.

My justification for keeping the interface low contrast is to emphasize content. Keep in mind that getbootstrap.com is designed for web designers and developers—most of whom will be familiar with traditional web design. Menus are in obvious places and don't need to be called out.

Take the alternative to the extreme: if we need color to show us clickable elements should we have flashing underlines? Gifs that move arrows back and forth?

> interface low contrast to emphasize content

I can certainly see that. Do you count "main body text" as 'content' in your designs?

I can imagine myself working with a web design until I was sick of seeing lorem ipsum. This might lead me to under-value 'content' from the perspective of the reader. You think such a phenomenon happens with web designers?

Or could it be that Apple did some kind of brainwave analysis on rats (or users :-) and determined that low-contrast was better for some purpose, then the design community just cargoculted it?

> I can certainly see that. Do you count "main body text" as 'content' in your designs?

I make an effort to never use placeholder text that doesn't at least closely resemble the real (or intended) content. This might just be me, but I'm pretty sure it's common amongst better designers: building something around fake data is much harder than building something 'real'.

> You think such a phenomenon happens with web designers?

Absolutely.

> brainwave analysis on rats (or users :-)

If Art and HCI are on opposing ends of a spectrum of interface design I've always been a bit closer to art—so my experience with testing ends at formal user interviews and guerrilla-coffee-shop tests. It's not a stretch to imagine the big tech companies doing brainwave analysis (and I'd be thrilled to participate at any level, it's seriously cool stuff).

> design community just cargoculted it?

Like any community, designers react to the trends of their peers, but a competent designer can defend pretty much any decision, which makes it hard to tell the difference between 'doing something familiar but wrong' and 'following trends that are right'.

You're right - the second one really starts to shine there, doesn't it. The colors are more alive and vivid and less washed-out looking.

I wonder why they went with that transparent button then.

That's a problem with whoever designed the new landing page then, not a problem with Bootstrap 3.0.

I think the header and main button could contrast more with the rest of the page, but otherwise think the current landing page is much better. And by "contrast" I don't necessarily mean color-wise.

I'd be curious how you'd react to something like this http://cl.ly/image/3A3O3Y2w2Y3i vs. http://cl.ly/image/40431N2q470M

The old page is pretty gross, IMO. If the current page is like an auditorium so quiet you're straining to hear something then the old page is like an auditorium where everyone is jabbering away. On the old design I see contrast in weight, size, alignment, and color, and that's just above the fold.

Personally, I'm glad they're not making web pages look like tombstones out of the box with that center-justified layout. I think the left-aligned new redesign is much sleeker.

Its a starting point, you're supposed to style it to your own taste. The dryer the better. Why are people still expecting a style machine our of B3.

And for people who are still concerned (and even though this is mentioned directly in the post - some people won't necessarily read it). There is a theme provided, which I personally think improves on Bootstrap 2's version.

http://getbootstrap.com/examples/theme/

The subtle color enhancements are nice (nothing like lowering contrast to make things look classier) but the button hovers appear broken.. that was an important bit of sparkle in twbs2 I hope 'twas just an oversight.

The hovers work, but they are so subtle you will barely notice it. I had to get very close to my monitor to notice on colors other than the default greyish white.

You can see a slight darkening around the edges; it's easiest to see on the default gray button. I agree: this needs to a be a stronger indicator.

They've acknowledged broken hovers as a bug, good ones are slated to return in 3.0.1 https://github.com/twbs/bootstrap/issues/9879

I also agree. The cue on the colored buttons is nowhere near noticeable enough.

Exactly. I also do not care for the flat stuff most of the time. The old design was much clearer and more defined. But the entire idea of starting with minimal base that you build up from is by far worth the trade off for me. I don't expect bootstrap to design my site for me anyway.

A dumb 'trend' that's been around for decades.

And agreed on your points. I'm looking forward to no longer having to override superfluous elements for the sake of customization.

Now they're going to all look the same...but worse!

You can't actually see all the left-menu items on http://getbootstrap.com/components/ on a 13inch screen.

This is the main problem I've found with fixed position, large height nav. Unless you engineer a way for the nav to be responsive and scroll separately from the page (which, BTW, is a bad UX) the bottom will get cut off.

I can't see all of them on a 1080p screen at 125% zoom, either.

If you scroll to the bottom of the page the sidebar will eventually scroll down and show them. Still an error though, and the irony, given the context, makes it a bit comical.

I can't see them all, even at 80% zoom, on a rMBP using Firefox with three rows of browser tabs. There are too many ways for this component to fail.

Which browser? Works fine for me in Safari 6 at any zoom level.

Chrome, 10.6, 1280x800.

It probably wasn't tested with this old of a version of chrome/webkit. Works fine for me (I'm on Chrome 28.0) at that resolution. Assuming the browser version is the issue, I don't really see it as being a problem that bootstrap needs to address. Versions of chrome older than 22 account for 1.3% of the browser market share, and since bootstrap has dropped support for IE7 (0.7% MS) and FF3.6, it isn't surprising that they aren't targeting this.

[1] http://www.w3schools.com/browsers/browsers_chrome.asp

10.6 refers to the operating system. Chrome auto updates - I'm on version 28.0.1500.95.

13" MacBook Air here. Looks more than fine.

It's cut off on my 13" MacBook Air on chrome.

Same here, 15".

Edit: Oh. I have just found out by another HN post that I did not understand the new grid system... Here is a link that explains it very well: http://www.helloerik.com/bootstrap-3-grid-introduction

I have used the release candidates for my own personal website and it has been a pretty good experience. However I liked the result I got with Bootstrap 2 more.

To say it upfront: I am not a web developer. I am doing something completely different professionally. But maybe that makes my experience with Bootstrap kinda interesting… :)

I had the main problem with the mobile first grid system. It changed quite a lot when compared to Bootstrap 2. I made a product page for my new app and I wanted to show thumbnails. When using the built in thumbnail class wierd things happen when you resize the window: The actual size of the thumbnail changes and it gets distorted as a result.

Also the new grid system has the effect - at least in my case - that when resizing the window, the overall width of the columns that contain my text expand even though I made the window smaller. And then when I make the window even smaller the columns containing my text are becoming less wide. I think this is because of the fluid layout.

Personally I do not like fluid websites at all. Maybe I should not have used bootstrap then but I had some experience with it… What I liked about the non fluid grid system in Bootstrap 2 was that your website looked more or less the same on desktop and on mobile. On mobile the first thing you would see is a scaled down version of your website with the structure in tact. If you wanted to see the details you would have to zoom in. Now Bootstrap tries to be smart and transforms columns to rows… This is obviously good if you want a fluid website.

When I had to do it again I would not use bootstrap again. Instead I would look for something that has a grid system like boostrap 2.

Here's a question: what's the difference between this icon font, and font awesome, which for a time looked to be the 'go to' way of doing icons? I have no horse in that race, and they both look good to me.

I just tried to swap in the new font-based glyphicon icons over the top of the old image based ones.

First of all it's not a clean swap, because the class name structure has changed. Secondly, the font glyphs seem to have totally random positioning, so depending on how you use them you'll need to tweak the css for each one (or certainly groups of them) so they align properly with the text/button/whatever.

I reverted, and dropped in Font Awesome. It was as simple as changing one line of css if you use the CDN, done. No tweaking required, and there's load more to choose from.

I also have found Font Awesome to be an easy and comprehensive solution (mmmm that huge icon selection, dang!). I honestly don't understand, why hasn't FA been folded into Bootstrap? Is it some licensing thing?

FontAwesome is free and open source. And has more number of icons than what you will get with this Bootstrap only free version of glyphicons.

You can use whichever one you like better...

I'm using Font Awesome on one of my Bootstrap 3 based sites because it has more icons.

No submenus is kind of a bummer for applications. Sometimes I work on traditional stuff with an audience that expects this kind of navigation.

I still really appreciate it, though. If it turns out I really need them, I'd rather start with Bootstrap than have to start from scratch.

Honestly this is the biggest point in Bootstrap 3 :

> box-sizing: border-box

I never understood why they didn't use it.

Bootstrap 3 paints 2x as fast compared to Bootstrap 2.3.

http://www.youtube.com/watch?v=Z1IqzeA3XXg

You're right, in my personal testing it does appear to be about 2x faster.

The big perf wins:

* Fewer box shadows

* Fewer gradients

* Fewer semitransparent borders (a big performance problem, especially in chrome - I've seen > 10x performance slowdowns when using rgba borders & border-radius: 0 - see Chrome's tracker [1])

* Simpler rules (fewer styles to cascade)

1. https://code.google.com/p/chromium/issues/detail?id=170882

this should be the most upvoted comment

I'm not at all a big fan of Bootstrap 3's new look, but the change to border-box alone is a great reason to use it. Applying custom styles to buttons and inputs in Bootstrap 2 is a huge pain due to box-sizing: content-box.

New look ? What has changed to the theme ? http://getbootstrap.com/examples/theme/

The default look is to make customization easier. So if you download the theme Bootstrap still looks the same.

Zurb Foundation has used border-box for a long time.

yes, that's why I was using Foundation over Bootstrap but this is going to change everything.

IE 6-7 support?

v2.x supported IE7, so yeah. Since we dropped that we were able to make use of it.

Edit for typo

I feel like most people using bootstrap don't really care about supporting IE 6-7. If you're really serious about supporting these browser there are two main reasons :

- you want people from the companies who are forcing them to use IE, to be able to view the website as intended (and I'm sure they can understand that it doesn't look as good as on the latest version of Firefox)

- you want people in China to have the best experience on your website.

Then I believe you should look at other solutions.

Sorry, my typo made this more confusing. We never supported IE6. IE7 was supported through 2.3.2. With v3, we dropped IE7 and now support IE8+.

Really? I have had a look at bootswatch.com using IE8 and a lot of the stuff (certainly columns, drop-dows, and navbars) doesn't work at all. I just get javascript errors. I would contend that if you want something that works in IE8 then avoid this like the plague. Unless someone can tell me differently.

Presumably that is an issue with bootswatch.com?

I'm just glad they kept table.table and label.label

The department of redundancy department can sleep peacefully tonight.

I've been working with the release candidates for a while for my Shopify-based Bootstrap theme (http://bootstrapforshopify.com/), and while it's been a bit of a tough ride sometimes (with pretty significant changes from release to release), I'm really impressed with what v3 brings to the table.

Hopefully, the way the new styles are laid out will encourage more people to treat Bootstrap as a starting point rather than the end game for layout and styling (although it's a pretty good starting point in of itself).

Edit: And, of course, massive thanks to Mark and Jacob (plus the ever-increasing community) for all of the work they've put in over the last two years :).

Yeah, sorry about those changes in the RCs. Really we used the wrong label and are sorry about that. All in all though, everything with those pre-releases worked out really well. Just a naming thing :).

And thank you! <3

Apologies not necessary :).

I appreciate the apology. I updated a site on the assumption that RC1 was a release candidate and not a work in progress. Now I need to update the site again. Ugh.

Release candidates are expected to have bugs!

I generally prefer using Major.minor.1 or Major.minor.2 of a new version (as many more bugs get fixed in those versions, after the stable version is used in production environment) or the last major version with all bug fixes.

RC1 to RC2 was much more than a bug fix release! http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/

> Everything in Bootstrap gets box-sizing: border-box

Why w3c didn't make it default is beyond me.

Bootswatch is in the process of updating its themes to Bootstrap 3 too:

http://bootswatch.com/

I've never heard of bootswatch. I could see many people using this. One thing bothers me on your page though. The header text is fixed with no background so it ends up jumbled with the other text: http://cl.ly/image/3D133Y1E1V2P

fyi I'm using chrome28 on osx 10.8.4

Now I'm waiting on a SCSS port of it.

If you are looking for SASS and Rails, this port works great. https://github.com/thomas-mcdonald/bootstrap-sass

Yup, and we'll be working with these folks make this more official shortly. Stay tuned!

That's great, there are a couple of sass ports for 2 and it was time consuming evaluating them so an officially blessed port would be great.

For those of us integrating it with web app where we use semantic class names that we want to map to template styles, it would help if there were sass versions that create no concrete styles, just mixins and placeholder styles, so that we can extend our classes with bootstrap ones without inheriting styles on elements where we don't want the bootstrap style. e.g. I wanted the .nav-tabs style but already had my own .nav styling.

Do you have any plans to make it possible to extend from bootstrap in this way?

I might try this when I get home - I'm new to Ruby/RoR and I had a hell of a time getting the twitter-bootstrap-rails gem and it's dependencies installed on my windows machine and just went with Foundation.

I've been using this port without issue: https://github.com/jlong/sass-twitter-bootstrap/tree/3.0.0-w...

Get it from a fast CDN http://www.jsdelivr.com/#!bootstrap

I prefer http://www.bootstrapcdn.com/

I checked this out last night and noticed a bug in the nav bar in the justified menu example (in Chrome, when you resize to sm and back to lrg, two of the menu items seem to drop down and unstyle themselves). If the issue is still up by the time I get to a computer, I'll submit an issue on Github.

Awesome. Does this mean no more breaking changes for vn 3? It's been a mad game of catch up so far, every time I update I have to spend some time going through and updating the html to use slightly changed class names.

Odd error on Safari 6.0.5 here. Where you should have three column layouts in the example page you get a single column list type layout. (Not a designer.) I've disabled both adblock and clicktoflash plugins.

Opening the mobile menu still lags a lot on my phone (Galaxy S3, stock browser). Why don't they use CSS animations for it instead? I was really hoping it would have been fixed in v3. Love the rest though.

We do.

No issues here both on stock browser and Chrome Beta (Nexus 4). Do you mean the initial delay or rendering jitter?

Rendering jitter.

Looks quite nice - I really like the new theme, as it allows you to go for a gradient look but appears much less intrusive than Bootstrap 2's theme, in addition to being optional.

Better documentation is also a huge plus.

Checkout roostrap too, one of the first Java web frameworks to support the new Bootstrap 3

https://news.ycombinator.com/item?id=6241294

FWIW, migrating from a RC downloaded 2 days ago to this final release broke some stuff, most notably related to glyphicons CSS - so if you plan on upgrading, just be aware that it might not be seamless.

I have found that `btn-large` changed to `btn-lg` during the release from RC to today. So definitely take a look at this for larger projects.

I'd like to see a collapse menu come from the left or right incorporated into Bootstrap. Like the one at http://purecss.io/

Glad to see that Mark put the theme information is right on top :). Hopefully this will allay criticism from the "why is it flat" developers.

Last time the RC was posted everyone was saying it was a beta and not an RC. So either it was ready for release or they just released a beta.

Does Bootstrap now play nice with jQuery UI?

Am i the only one who finds that far too many pages look alike thanks to bootstrap and co?

Nice work bootstrap team! I really like how mobile friendly this version of bootstrap is!

wasn't the easiest upgrade from 2 to 3 on one site of mine...

yup me to.. they changed the css a lot.. have to check one by one.. :(.. But output outsome. Rc1 ->rc2 -> 3.0.. my menu 3 drill down work again.Rc2 not work.

I'm glad they decided to keep glyphicons properly integrated.

Do you have a list of the differences between RC2 and this?

odd bug- i just switched from rc 2 to the official release- now the page shifts slightly left when modals open, and back when they close. What is going on?

Love the vids!

Awesome!

Thanks to all contributors for the hard work!

Well I'm glad I finished a customization of the v2 carousel last night. Will this thing break if I update? I'm betting yes.

On the grids part, basically added what foundation already had

"Yo Bootstrap, I'm really happy for you, I'll let you finish, but Foundation has one of the best frameworks of all time. One of the best frameworks of all time!" ;-)

I found myself backing out of using Foundation after downloading their latest version and trying to use a couple of their javascript components. Lots of bugs and generally fugly workarounds needed for the most basic things.

I just removed it, and went back to Bootstrap.

I was also quite surprised that the javascript components seemed to take a step backwards in design and documentation from Foundation 3 to 4. Not sure why that is.

Except Bootstrap 2.x's JS was terribly basic and didn't play well with single page apps. I haven't tried v3 yet so I don't know if it has improved.

I wouldn't know about that; I've never built a single page app.

Nice opinion. You could have done me a favor and actually offered it in a more helpful way rather than referencing a quote from an idiot....

If anyone else is interested in checking out the foundation framework, here's the link to save you a google: http://foundation.zurb.com/

it used to be for sure, but with the box-sizing and the new grid system ? I don't really know anymore.

I like Foundation for the forms and the grid syntax

but bootstrap has a better default theme and has font awesome for so many icons.

Font Awesome works just fine with Foundation.

I've actually never thought about using it on its own since they're advertising it for Bootstrap only.

Reply on news.ycombinator.com