Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Best New Features in Bootstrap 3.0

DZone's Guide to

Best New Features in Bootstrap 3.0

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

 

bootstrap-comparison

bootstrap-horizontal-compare

Bootstrap 3.0 RC1 is looking great and I’m so happy to say that it’s a great transition and it looks much better than Bootstrap 2.X.

I feel that, overall, BS3 is joining the modern and final-design agnostic chapter of its existence. The flat UI opens up everyone to build on top of it, as it should be, rather than tear existing effects down.

And look at the colors, too! BS3 looks much brighter than the darkness of BS2.3.X. This is a major shift from the default they’ve kept while developing Bootstrap. My regular readers will recognize the difference right away, and the non-regulars can easily check out my tutorial on creating a Kirby CMS theme with Bootstrap 3.0 WIP.

Enjoy!

What’s new and better

Flatter and cleaner UI (buttons and menu!)

buttons-bootstrap

bootstrap-nav

The Bootstrap 2.0 look swept the internet with a craze of super-simple apps and a unified interface. I blatantly advocated against it once I realized I could not tell one from the other. Since then, UI kits, skins, and theme marketplaces have sprung up to curb the overuse of barrel-like full-width top menu, and the plastic-y buttons, and much more. The web looks great now. Non-bootstrap frameworks have adopted some features but opted out for their own unique look.

Bootstrap 3 took it to another level. Not only did it update its appearance to be more trend-agnostic with its flat look but it also presents its own theme for documentation with its purple colors and its purple navigation bar. I think that this will REALLY encourage people to experiment and rebrand bootstrap to their own liking.

It’s pretty neat. It makes Bootstrap behave nicely across devices as well as browsers. Meaning that even IE8 and IE9 get a beauty treatment from BS3.

Best of all, I’m personally not forced to augment shadows and dig through the code base to correct the past look of it.

One more thing: Bootstrap 3.0 also has happier colors! It’s like waking up from the darkness of the web that Bootstrap 2.X was!

Reset Via Normalize

It has come to my attention that Bootstrap has been using Normalize since the first release. I never noticed it before, I guess.

Foundation’s been using Normalize for a while and other frameworks have started to adopt the same. I’m glad Bootstrap is jumping on as well. This is how pseudo-web-standards are made. Big players like Foundation and Bootstrap can make a fundamental shift in how we code.

By using Normalize as the “reset” stylesheet, these frameworks are able to code on a clean slate. Not only that, but making cross-browser changes is much simpler. The reset code is extremely small and it’s a great balance between over-declaring elements and not resetting enough. :)

Glyphicons

Finally separate so that you can plug in your own solution, glyphicons are no longer part of the base code. Not only that but Bootstrap finally converted to an icon font rather than using its old sprite system.

This was a big deal. Everyone I know used to plug in their own solution and some Bootstrap generators would pre-package Bootstrap with extensions the likes of Font Awesome.

So wait, does this mean that extensions like Font Awesome are dead? No, not at all. Font Awesome has animations and way more icons. However, Glyphicons being a default will give rise to a new trend since ... wait for it ... the icons got a redesign and the font features some new interesting pieces:

glyphicons

Right off the bat, I’m sure you’ll notice the sorting icons on the bottom right. You may also notice the pointer hands two rows above. I do wonder how this will impact the internet as a whole, given that Bootstrap has become somewhat of a trend-setter due to its widespread use.

New Grid System

bootstrap-grid

The grid system is largely reminiscent of Foundation’s grid. The grid is no longer the linear and generic 12-column layout that collapses to one column when the browser’s width is shrunk.

The new grid system now allows for variable declarations according to device size. So, for example, you can have a four-column content layout that collapses to two columns for tablets and a single-column layout for phones. This gives you great power because you can control your site’s look across devices more granularly.

Want less power? No problem, there is a generic column class that you can use, which will work the same way as previous Bootstrap iterations. However, mind the new syntax!

Form Layouts According to Cols, No More Controls!

With the redefined column setups comes another perk: Bootstrap finally got rid of its form control classes. Remember those pesky things:

<div class="control-group">
    <label class="control-label">
 <div class="controls">
     <input type="text">
 </div>
</div>

So that’s gone and you’re expected to use regular grid classes. Which is great. Syntax is cleaner and makes more sense. Plus, you get more control over the look of your form and the ratio between labels and input fields.

This example would look like this in BS3:

<div class="row">
  <div class="col-4">
    <label>
  </div>
  <div class="col-8">
   <input type="text">
  </div>
</div>

List Groups

List group is a new component under Bootstrap that is a pretty big thing for me. I’ve written before about how I had to create my own custom-CSS framework to be able to easily prototype things like feeds, statuses, link lists, etc. well. Bootstrap somewhat took care of me here.

bootstrap-list-groups

You see that, with custom content list groups, you can easily prototype a Reddit clone, comments, and other elements. This shows you just how much Bootstrap has progressed toward becoming the ultimate prototyping CSS framework.

Contextual Panels

Hopefully a future replacement for regular error pop-ups, contextual panels give color to the entire framework. Seriously. Well, that and colored quotes that you can find anywhere.

Bootstrap took its coloring system more seriously and styled its elements to accommodate the coloring, whether it’s for a warning, to inform or otherwise.

Again, this is an awesome addition mirroring what Foundation was already able to do. I’m very happy that the two frameworks are somewhat working off each other to advance.

contextual-panels

Row Mixins (Updated 8/1/2013)

One thing I neglected to mention is that the usage of mixins in Bootstrap changed in terms of grids. You can now easily create your own grid, or rip out the grid and define only what sections you need (for example: content + sidebar instead of a full 12-column layout). In addition to doing this, you can also specify break points for your fluid rows. Here’s the code that Bootstrap uses:

mixins

You can specify various variables that modify the behavior of these mixins, namely @grid-float-breakpoint, @grid-columns, and @grid-gutter-width. So let’s say I want to recreate the layout of my particular site. I could do this:

@grid-float-breakpoints: 768px
@grid-columns: 16
//I like 16 col layouts
@grid-gutter-width: 20px

#wrap {
  .make-row();
}

#header {
  .make-column(3);
}

#inner {
 .make-column(13);
}

.content-sidebar-wrap {
 .make-row();
}

#content {
 .make-column(12);
}

#sidebar {
 .make-column(4);
}

OK, so, my site is a little weird in terms of structure (I’m using Genesis) but you get the idea. No need for a grid. And again, you can make your own grid very easily - specify better breakpoints, etc. It gives you unprecedented power over your site structure and in creating your own site layouts.

But It’s Just RC1

Yep, it’s just release candidate one. Bootstrap announced that it will be releasing RC2 after it gets some feedback and then it’ll be ready to do a final launch!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Antonin Januska. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}