Bootstrap 3 preview

The issue Bootstrap still has is that the parts that make use of JavaScript completely rely on JavaScript. If you're on a flakey data connection, for example, and JavaScript doesn't load parts of the page simply break.<p>The tab component is a good example of this - turn off JavaScript in your browser and you'll see that it still looks like tabs (thanks to CSS) but you just can't access anything part from the first tab.<p>Technically, this isn't a hard problem to solve. Have JavaScript add the HTML class that triggers the CSS rules to make the content look like tabs. If JavaScript fails, no part of the page ever gets hidden.<p>It would be great to see Bootstrap embrace progressive enhancement properly. With more devices of different capabilities accessing the web over networks of varying quality all the time, it becomes more important than ever to build robustly and not just for the best-case scenario.

If anyone is looking for a basic summary of "What's new", the best I found was their blog post about plans for v3:<p><a href="http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/" rel="nofollow">http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/</a>

For everyone complaining about the flatness, it looks like it's only temporary.<p><a href="https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378" rel="nofollow">https://github.com/twitter/bootstrap/pull/6342#issuecomment-...</a>

It's interesting that so many of the comments here (and often, those made about Bootstrap in general) focus on the aesthetic of a few form elements and not the utilities that come with the framework. Understandable, I guess, as they're the most obvious when you load up the page!<p>I've been playing with the 3.0.0-wip branch for a little while, and I think that there are a couple of really cool features that should be noted above the cosmetic - the single, fluid grid; font icons by default; and a mobile-first design.

Not sure if I like this at all. I think they need to call it<p>Bootstrap 3: flat and fat!<p>It just seems like a huge step back to me. It's not even an elegant "flat" design; it's like they scrapped everything and decided to make all classes (even buttons for God's sake) DIVs of different colors. The new navbar, for example, is literally a gray DIV with rounded edges. I use Bootstrap on my web app because I care about design, but I don't care so much about learning fancy CSS; Bootstrap takes care of making things look subtly 3D, shaded, animated, etc., and that's what I'm looking for. I can make flat DIVs myself, thank you very much.

For comparison, also check Foundation 4.0, launched about 10 days ago. Foundation seems to be slightly ahead (as in, already launched) in moving to newer technologies (mobile-first, border-sizing:border-box, ..etc).<p><a href="http://www.zurb.com/article/1173/foundation-4-is-here-the-smartest-foundat" rel="nofollow">http://www.zurb.com/article/1173/foundation-4-is-here-the-sm...</a>

A big heads up for anyone thinking of switching. Bootstrap 3 "Drops IE7/FF3x support entirely."<p>ref: <a href="http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/" rel="nofollow">http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/</a>

with some sass knowledge you are better of starting off with a couple of mixins and building from bottom up as compared to loading a fat css file you probably won't use 80pc of its rules.<p>Normalize css[1] Bourbon[2] for utilities Neat[3] for the grid, Typeplate[4] for a nice type base.<p>If you still need bootstrap style elements, you can get individual mixins and styles from one the bootstrap-sass projects[5]<p>[1] <a href="https://github.com/necolas/normalize.css/" rel="nofollow">https://github.com/necolas/normalize.css/</a><p>[2] <a href="http://bourbon.io" rel="nofollow">http://bourbon.io</a><p>[3] <a href="http://neat.bourbon.io" rel="nofollow">http://neat.bourbon.io</a><p>[4] <a href="http://typeplate.com" rel="nofollow">http://typeplate.com</a><p>[5] <a href="https://github.com/thomas-mcdonald/bootstrap-sass" rel="nofollow">https://github.com/thomas-mcdonald/bootstrap-sass</a><p>edit: typo

Is it just me or do the new buttons not really fit with everything else. They look very flat. But most other components have shadows and still look like old bootstrap

I don't get why they went full flat. It was way more attractive before.

How is the touch support now? I was trying to use bootstrap "radio buttons" the other day, flailed about for several hours (touchend handlers worked for regular buttons, but not the radio buttons), and they still aren't working on an iPad.

The buttons look like they are disabled.

why don't they just incorporate font awesome?

Segmented dropdown groups are broken for me in chrome. The drop down is floating underneath the button.

Something that always bothered me about Bootstrap is that the examples don't make full use of HTML5, although…<p><pre><code> Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. </code></pre> The two examples that immediately come to mind are NAVs[1] and progress bars[2]; HTML5 already defines these elements. Why reinvent the wheel?<p>[1]: <a href="http://rc.getbootstrap.com/components/#navs" rel="nofollow">http://rc.getbootstrap.com/components/#navs</a> [2]: <a href="http://rc.getbootstrap.com/components/#progress" rel="nofollow">http://rc.getbootstrap.com/components/#progress</a>

Is it meant to be default to full on flat-ui? First impression is that the buttons are now less apparent interface items and it'll take more careful layout planning to make a quick bootstrap effective. Thoughts?

The Responsive Utilities section is interesting with new classes such as .visible-phone and .hidden-phone (also tablet and desktop) but I find in my app that my customers want to see all of the columns even if it means a little bit of scrolling.<p>Zurb takes an interesting approach with their responsive tables (<a href="http://www.zurb.com/playground/responsive-tables" rel="nofollow">http://www.zurb.com/playground/responsive-tables</a>).

Those new badges are a real nice addition<p><a href="http://rc.getbootstrap.com/components/#badges" rel="nofollow">http://rc.getbootstrap.com/components/#badges</a>

I actually like the changes. Now everyone will have to do a bit of style editing before using this. So we won't see so many identical sites.

The description at the start of the pull request for this work-in-progress branch is worth a read for understanding the motivations behind most of the changes.<p><a href="https://github.com/twitter/bootstrap/pull/6342" rel="nofollow">https://github.com/twitter/bootstrap/pull/6342</a><p>It may also help to keep in mind that this is a <i>preview</i>. Bootstrap 3 isn't done yet.

Looking at the grid i noticed the 1-column divs change size. e.g. 41px - 42px - 41px - 42px - etc. When resizing in smaller displays it behaves different: 25 - 25 - 24 - 25 - 25 - 25- 24 - etc. Was this always the case in bootstrap? I don't really understand the reason for this. It seems odd.

Mobile first? There are a ton of broken examples on my iPhone (grids, inline elements, etc.).

I like the way tables are handled, it looks so easy now. However, there are still bugs. Screenshots here:<p><a href="http://www.backwardcompatible.net/164-twitter-bootstrap-3-bugs" rel="nofollow">http://www.backwardcompatible.net/164-twitter-bootstrap-3-bu...</a>

Can we make the flat UI optional?

Endless props, thanks, and respect to the Bootstrap team. They do an amazing job, sometimes with less-than-amazing levels of gratitude in return.

i really wish they wouldn't lock form into being horizontal or inline by putting a class on the form tag itself, but rather by using the fieldset tag. The whole reason is because sometime when you are doing a large form, some sections just flow better as an inline rather then a horizontal and vica-versa. I submitted a ticket about this a while back, but it must have been overruled.

One thing I liked most is 'Responsive utilities', no device specific coding. If you want show sidebar on desktop, drop .visible-desktop.

Fyi, top nav menu doesn't work on nexus 7

I like the addition of the .btn-block class -- I'll definitely be using that for mobile optimization!

is the table of contents ordering out of whack for everyone? when I scroll down the page, the right hand table of contents jumps typography-&#62;grid system-&#62;code-&#62;tables, even though the menu is laid out as typography-&#62;code-&#62;grid system-&#62;tables...

I still fail to understand this. What's its purpose? To make all web pages look the same?

I don't get this flat look, it reminds me of Windows 8. Is it a new trand in web design?

I see some of bootsnipp's ready made recipes are added in this version.

Modal is still a disaster.

Will be nice to have a "border-less" class for tables...

What's with the whitish glow on button text?

Meh. too flat<i>

For god's sake, just learn some CSS already.

the download link is broken

Mobile first - Yeah! Can anyone compare/constrast the mobilefirst-ness of Bootstrap3 and Zurb4 ?? Why would I use one vs the other??

I don't really like the new buttons. Other than that good job.

Is it me or do they use greyish text on white background that makes the whole thing hard to read ? i'd like to understand , what the hell is that low contrast trend and how does it make the text more readable ? Designer should quit it. Are they stupid or what ? Also this flat trend make the design very poor , but maybe that's the intended effect.

So Bootstrap uses proprietary HTML elements, like Angular?<p>I like both frameworks but is this a trend we should worry about?