• Employee Development
  • January 22, 2015

How to Use the Grid from Bootstrap 3 in Liferay 6.2

Reading time: 4 min

Liferay 6.2 is bundled with the old Bootstrap 2.3.2 and you want to use the mobile-first grid system from Bootstrap 3. Because Bootstrap 2 uses different class names you can take BS3 grid and use in the Liferay 6.2.

The premise

We have been using Bootstrap 3 here in Valamis pretty extensively in our client cases for a few years now. Our developers have learned the grid system and mobile first approach the version 3 offers. For several projects, Valamis developers have been responsible for the front end implementation of the design to the Liferay 6.x. Graphic design comes either from our own UX team or from customers ad agency.

The struggle

In one of our internal project kick-off meetings, we analyzed the layout of the design we had received from the client. In this particular case, we observed that the photoshop layouts were done with 12 column grid. This kind of layout is pretty much de facto nowadays and we came to a conclusion that the implementation would be straightforward. The Liferay version would be the latest 6.2.

I guess it is no news by now that Liferay 6.2 uses the old Bootstrap 2. This has been a little challenging for us. At the beginning of the implementation, one of our developers came over to me and was slightly upset about the grid system. He had been using BS3 before and going back to old grid seemed somewhat odd. Especially in this project when we were supposed to use the latest Liferay version.

The solution

We decided to wipe our tears and see if we could find some kind of a workaround to the situation. We started comparing the two grid systems and realized that the old BS2 grid uses different names for the classes than the new BS3. I showed my colleague how to extract only the grid part from the BS3 CSS and combine it with the old BS2 CSS.

Boostrap 2.3.2 release can be downloaded from GitHub or from Bootstrap. The classes the old grid uses are: .row-fluid, .span1 - .span12, .offset1 - .offset12, .container-fluid (overlapping).

Bootstrap.css in github master branch shows how new grid is structured. BS3 grid classes are: .row, .col-xs1 - .col-lg12, .container-fluid (overlapping). There is also media query parts for all the breakpoints.

We extracted those BS3 classes from the CSS and added them to our project CSS. This appeared to be an easier fix than we had anticipated. From now on the unified grid systems lives happily in unison.

The aftermath

One question might arise to one's mind: What if the initial design would have used other grid layout than 12 columns? In that case Sass variables to the rescue. In earlier projects, I have used the official Sass port of Bootstrap to create custom grids on the fly. The structure of grid part of the Sass port looks like this:

├── grid
│   ├── _bootstrap.scss
│   └── bootstrap
│       ├── _grid.scss
│       ├── _mixins.scss
│       ├── _variables.scss
│       └── mixins
│           ├── _clearfix.scss
│           ├── _grid-framework.scss
│           └── _grid.scss
└── styles.scss

Altering the _variables.scss file you can change the grid column count, gutter width and responsive breakpoints. The resulting CSS has all the needed classes.

So there you have it, hopefully, this has been helpful. If you have any questions about this article or anything front-end related for that matter, you can find me on Twitter @eeppo.

Eelis Eskelinen