Hey guys, today I am going to speak about a concurrent topic, how to replace Bootstrap 2.3.2 CSS in Liferay 6.2 for new Bootstrap 3.x, I have received a lot of questions about it, and I helped all I was able, but I think this post and GitHub repository with a theme example can help more than some emails.

Before all else, I would like to say that the solution which I provide today is a personal work (not official) and only one of many ways to achieve it but for me it is the easier way because we only change the theme.

Yes, I've written the word "replace". This solution remove Bootstrap 2.3.2. and add Bootstrap 3.x (4 in the near future). It is not a way to put Bootstrap 3 on top of Bootstrap 2.3.2, I can not recommend that solution for many reasons, for example: it would duplicate the CSS weight, there would be a lot of class conflicts, or it would be very difficult to define browsers compatibility in your project.

Of course, we can not replace all Bootstrap 2.3.2 classes references along Liferay portal only when you theme is applied, but they are not many classes to rescue, so we will extend those old classes from new Bootstrap 3.x equal clases, like an example: span6 will work as col-md-6.

it can sound hard but no worries, let's see step by step (or go directly to GitHub repository with an example):

We are going to create a new _styled theme based on Boostrap 3.x, so first of all, you will need create a new theme using new SDK based on gulp or normal SDK.

Did you know where Bootstrap 2.3.2 CSS files are located in your theme? No worries, they are in “css/aui” directory, so let's work into this directory.

1º Create new aui.css file in “css” directory, then we must delete Bootstrap 2.3.2 references in this aui.css, in this way Bootstrap 2.3.2 will be removed from our theme (files will be there, but they won't be loaded).

2º Now we are are going to add the new Bootstrap, so let's go to copy "Bootstrap 3.x sass-version" files into a new directory inside “aui” called "bs3" and reference it in aui.css.

We can use differents ways to get Bootstrap 3.x sass-version, download directly from Bootstrap-sass GitHub repository, using Bower, npm, gem or compass, as you prefer.

3º Well, we have interchanged Bootstrap versions, but all old classes which have been deleted/renamed in Bootstrap 3.x do not look well so they should be created as an extension of the equal classes in Bootstrap 3.x, for this we will use my CSS file named "_bs2_extender.scss" which will do all basic extensions.

Some examples about what this file does:

4º Some Liferay CSS components do not look so well as they should because they were based on Bootstrap 2.3.2, so to fix it we will add a file called “_bs_liferay_fixes.scss” which contains some adjustments.

Now we can deploy the theme and we should see something like this:

It’s done! you have a new Bootstrap 3.x_styled-theme with which you will be able to use as a base to build your Bootstrap 3.x Liferay 6.2 themes.

In “_bs2_extender.scss” file I have extended the classes I consider the minimum to work well in Liferay 6.2, but feel free removing or adding, even collaborating in GitHub repository of this theme.

I recommend to use this theme when we want to use Bootstrap 3.x upgrades like its grid or responsive facilities. If we are still writing Bootstrap 2.3.2 markup, It wouldn’t make much sense, so be smart about what Bootstrap version do you want to use.

Thanks guys! More info about what I’m working on, Liferay themes or Liferay general world on my twitter @marcoscava