Migrate to the latest version of Bootstrap

Reading time ~2 minutes

Migrating to Bootstrap v3

My first task in GSoC was to update TSP to the latest version of Bootstrap. TSP was built on Bootstrap 2 using the twitter-bootstrap-rails gem with LESS. Though the latest version of Bootstrap is v4, but currently it is in Beta phase, so we will be updating to Bootstrap v3.

Bootstrap

Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes. There has been a lot changes made in the Bootstrap v3, many new classes have been introduced and some of the classes of Bootstrap v2 have been modified or removed. What’s new in v3.0

Twitter Bootstrap Rails gem

One of the ways to use Bootstrap in Rails is using twitter-bootstrap-rails gem. With the help of this gem you can use the Bootstap stylesheets in two ways by using the plain CSS or with LESS. It is very easy to integrate this gem in you rails project. To use it with LESS you have to include the following gems

gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. For more information visit lesscss.org

To use it with plain CSS you just have to include the twitter-bootstrap-rails gem. For more details on How to use this gem click here.

Steps to Update to Bootstrap 3 from Bootstrap 2

When using bootstrap with the help of twitter-bootstrap gem

  • Update the twitter-boostrap-rails gem to the latest version (here it is 3.2.2) with bundle udpate twitter-boostrap-rails this will also update the dependencies for the gem.

  • If you are using LESS do rails generate bootstrap:install less to generate the boostrap includes

    The latest version of boostrap only generates the bootstrap_and_overrides.css.less file for the stylesheets directory, you can define any overrides for the classes in this file.

Updating the Bootstrap classes

  • To view the major style changes click here

  • Also there are various classes that have been removed in v3. For those classes you can use their equivalents or create your own with the classes in v3.

For any issues refer to the Bootstrap documentation. Also if you are using simple form in your application you have to generate the updated intializers of simple_form.

Special thanks to Björn Geuken for helping me in this task.

To know about Travel Support Program visit TSP or you can read my previous post.

GSoC product submission

Details about new features added in TSP during GSoC Continue reading

GSoC Second evaluation

Published on July 05, 2017

Second task of GSoC

Published on June 20, 2017