A Week with Bootstrap 3
The most notable feature of Bootstrap 3 is "mobile-first". Bootstrap 2 did a good job with mobile devices, but the new release really brings the "mobileness" as an integral part of the framework. To consider the difference in the grid classes, let's say you have a two-column layout, which you would implement like this on Bootstrap 2:
<div class="span-6"> first column content </div>
<div class="span-6"> second column content </div>
If you add bootstrap-responsice.css, on mobile devices these columns would get stacked and each fill the width of screen.
The equivalent in Bootstrap 3 is:
<div class="col-lg-6"> first column content </div>
<div class="col-lg-6"> second column content </div>
But what if you want to keep two columns on mobile devices too? In this case you add "col-*" for handset or "col-sm-*" for tablet to indicate the columns should not get stacked on these devices, for example:
<div class="col-lg-6 col-6"> first column content </div>
<div class="col-lg-6 col-6"> second column content </div>
<div class="panel-heading"> Panel Heading </div>
<ul class="list-group list-group-flush">
<li class="list-group-item"> First item </li>
<li class="list-group-item"> Second item </li>
<li class="list-group-item"> Third item </li>
The content of list groups items can be as simple or as complex as you need them to be.
An important improvement in Bootstrap 3 is the performance. Take a look at this demonstration by Paul Irish.
Now for the pain point: Bootstrap 3 is not a drop-in replacement for Bootstrap 2. If you are migrating a project that uses bootstrap 2, you will need to change the markup and classes quite a bit. But there are benefits to the new markup. Let's consider a very simple form in Bootstrap 2:
<label class="control-label"> Label </label>
<input type="text" />
The label's width is constant and you can set the input's width by adding "input-*" or "span-*" classes.
In Bootstrap 3 you get control over the label and the inputs wrapper by adding the grid classes:
<label class="control-label col-3"> Label </label>
<input type="text" class="form-control"/>
For the past week I have been migrating an AngularJS application from Bootstrap 2 to Bootstrap 3. One of the main components of the application is Bootstrap-UI, which mostly works fine with Bootstrap 3.
My recommendation: you should definitely start playing with Bootstrap 3 whether you have an existing application or website that uses Bootstrap 2 or starting a new one, especially if you are aiming for cross-device compatibility, just be aware that a migration from Bootstrap 2 will take some work.