A Week with Bootstrap 3

I am a big fan of the Bootstrap CSS framework and have been using it in various projects. Bootstrap 3 RC1 which was recently released is a total rewrite of the framework.

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="row">
    <div class="span-6"> first column content </div>
    <div class="span-6"> second column content </div>
</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="row">
    <div class="col-lg-6"> first column content </div>
    <div class="col-lg-6"> second column content </div>
</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="row">
    <div class="col-lg-6 col-6"> first column content </div>
    <div class="col-lg-6 col-6"> second column content </div>
</div>

Another thing that helps with mobile UIs are list groups and panels. Here is a very simple example of a list group in a panel:

<div class="panel">
    <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>
    </ul>
</div>

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:

<form class="form-horizontal">
    <label class="control-label"> Label </label>
    <div class="controls">
        <input type="text" />
    </div>
</form>

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:

<form class="form-horizontal">
    <label class="control-label col-3"> Label </label>
    <div class="col-9">
        <input type="text" class="form-control"/>
    </div>
</form>

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.

Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com