How to migrate from Bootstrap 2 to Bootstrap 3
Bootstrap is without a doubt the most widely used front-end framework, it’s thought to power 1% of all websites currently on the web and if we look at how Bootstrap is built it’s easy to see why, it simply makes development so much easier for us. Now the RC2 of Bootstrap 3 is out and they have completely redone the framework from top to bottom. Let’s now see what has changed to help your migration a little.
The grid is one of the biggest changes and has been completely rebuilt for a mobile-first approach and this means that there is no more fixed grid, the only grid provided with Bootstrap is a fluid grid and it also comes with 3 different kinds of columns.
To help you create responsive designs, there is one for smartphones (.col-*), another one for tablets(.col-sm-*) and a big one for laptops/desktops (.col-lg-*) , having these 3 sizes you have more control over how the grid will behave on every device. When it comes to the grid you can say farewell to the span-* classes and replace them with these 3 and since the grid is only fluid now there is no more .container-fluid, only .container and the same goes for .row-fluid, the fluid keyword can now be removed since everything is already fluid by default. What you need to convert the Bootstrap 2 grid to 3 is:
- Replace .span* with .col-lg-*.
- Replace .container-fluid with .container.
- Replace .row-fluid with .row.
Of course these 3 grid sizes are meant to be combined for a better responsive experience on the user’s end. So in order to combine these grids you just need the classes mentioned above like so:
Here I combined the big grid for desktop with the smallest one for smartphones and instead of one row when the user is viewing the website on a smartphone s/he will be presented with two rows in order for every single div to be bigger and more visible on smaller screens. You can customize this even more by using the .col-sm-* that is activated when the user is on a tablet.
Another really good thing about the new grid is that all the classes in Bootstrap 3 are contained in a single file, it’s only 66KB and has been optimized for performance.
What’s new ?
In Bootstrap 3 we have some nice new elements, one of them is the List Groups which are a way to create lists with custom content in them. You can place a heading and then some paragraphs with some simple HTML like so:
To see more about List Groups check out their section in the Bootstrap Docs.
Another addition is Panels, here you can create a div that will behave like a box on your page and in this div you can have a header, body and a footer so it’s like having a DOM in a single div. You can create these using their default grey styling or use the contextual panels that adopt the colors of Bootstrap, this may come in handy in some projects, to create a blue panel with a header and footer you need:
If you want to see more about panels refer to the Bootstrap website.
As usual when something evolves it also changes and in a framework this usually means that the classes change and the major changes this version had were:
- .container-fluid is now .container
- .row-fluid is now .row
- .span* is now .col-lg-*
- .offset* is now .col-lg-offset-*
- .brand is now .navbar-brand
- .hero-unit is now .jumbotron
- .icon-* is now .glyphicon .glyphicon-*
- .btn is now .btn .btn-default
- .btn-mini is now .btn-xs
- .btn-small is now .btn-sm
- .btn-large is now .btn-lg
- .visible-phone is now .visible-sm
- .visible-tablet is now .visible-md
- .visible-desktop is now .visible-lg
- .hidden-phone is now .hidden-sm
- .hidden-tablet is now .hidden-md
- .hidden-desktop is now .hidden-lg
- .input-small is now .input-sm
- .input-large is now .input-lg
- .input-prepend is now .input-group
- .input-append is now .input-group
- .add-on is now .input-group-addon
- .btn-navbar is now .navbar-btn
- .thumbnail is now .img-thumbnail
- ul.inline is now .list-inline
These are just the classes that have changed but there are also some things that have changed in the elements:
- all inputs have 100% width by default;
- images are not responsive by default , you need .img-responsive to achieve a fluid image;
- the glyphicons come in a separate CSS file;
- .badge no longer has contextual classes;
- the markup for the modals has changed and .modal-header, .modal-body and .modal-footer now get wrapped in .modal-content and .modal-dialog.
Version 3 of Bootstrap was built from the ground up to have a mobile-first grid and a cleaner and more effective UI. Of course it may not be to everyone’s taste but they have made some great improvements.
In my opinion this version of Bootstrap is way more efficient and customizable than version 2 and it’s great to see this enormous framework evolve so much in just one version.