top | item 6239793

Bootstrap 3 released

469 points| trumbitta2 | 12 years ago |blog.getbootstrap.com

124 comments

order
[+] bluetidepro|12 years ago|reply
> "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! :)

[+] davidw|12 years ago|reply
> 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.

[+] d23|12 years ago|reply
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.

[+] tsurantino|12 years ago|reply
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/

[+] JeremyMorgan|12 years ago|reply
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.
[+] colmvp|12 years ago|reply
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.

[+] pbreit|12 years ago|reply
Now they're going to all look the same...but worse!
[+] phillmv|12 years ago|reply
You can't actually see all the left-menu items on http://getbootstrap.com/components/ on a 13inch screen.
[+] driverdan|12 years ago|reply
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.
[+] STRML|12 years ago|reply
I can't see all of them on a 1080p screen at 125% zoom, either.
[+] adamzegelin|12 years ago|reply
Which browser? Works fine for me in Safari 6 at any zoom level.
[+] prezjordan|12 years ago|reply
13" MacBook Air here. Looks more than fine.
[+] LinaLauneBaer|12 years ago|reply
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.

[+] davidw|12 years ago|reply
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.
[+] highace|12 years ago|reply
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.

[+] manojlds|12 years ago|reply
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.
[+] stephen_g|12 years ago|reply
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.

[+] ibejoeb|12 years ago|reply
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.

[+] baby|12 years ago|reply
Honestly this is the biggest point in Bootstrap 3 :

> box-sizing: border-box

I never understood why they didn't use it.

[+] STRML|12 years ago|reply
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.
[+] driverdan|12 years ago|reply
Zurb Foundation has used border-box for a long time.
[+] steveax|12 years ago|reply
I'm just glad they kept table.table and label.label

The department of redundancy department can sleep peacefully tonight.

[+] gavinballard|12 years ago|reply
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 :).

[+] markdotto|12 years ago|reply
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

[+] scotty79|12 years ago|reply
> Everything in Bootstrap gets box-sizing: border-box

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

[+] philip1209|12 years ago|reply
Bootswatch is in the process of updating its themes to Bootstrap 3 too:

http://bootswatch.com/

[+] johnward|12 years ago|reply
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

[+] rmrfrmrf|12 years ago|reply
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.
[+] weavie|12 years ago|reply
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.
[+] spitfire|12 years ago|reply
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.
[+] Kiro|12 years ago|reply
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.
[+] skeletonjelly|12 years ago|reply
No issues here both on stock browser and Chrome Beta (Nexus 4). Do you mean the initial delay or rendering jitter?
[+] benaiah|12 years ago|reply
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.

[+] peferron|12 years ago|reply
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.
[+] joshfinnie|12 years ago|reply
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.