You are here

LP5 Bootstrap Responsive Theme (not template)

Submitted by dnase on Thu, 04/24/2014 - 13:47

Hi There,

I have modified the base Luminis 5.1 theme to include Bootstrap CSS and Javascript so that a responsive template (like Dustin Sier's) can be used. It's available here:

Feel free to post a reply if you need any help.


Luminis Version:


The responsive template that Dustin Sier wrote, where would that go in the code? I was able to take what you put on github and build out the war file. Thanks for help and the modified Luminis theme.


Hi Mike,

To get Dustin's template to work, you would take the .tpl files that Dustin provided, and put them in this directory:


Then you need to modify liferay-layout-templates.xml in:


And add the XML that Dustin provided in the copy of liferay-layout-templates.xml on his github. I added mine to the end of the section, inside the tags.

Also note that for whatever reason, the template marked "3 column bootstrap" is only 2 columns.

Don't forget to bounce your servers after making these changes!



Thanks for the steps to add Dustin template. I figured out my issues and now the repsonsive theme works. I noticed that there are some changes between 5.1 and 5.1.1 that were messing me up. Now to figure out what I need to change to get the 3 column working for the responsive theme. Thanks again for posting this.


Did you get the 3 column layout working? If yes, how??

I can only get 2 columns of portlets using that layout.

Any hints will be most appreciated.


Yes we did get it working. From my reading about using bootstrap for the responsive themes the "col-md-insert_number" must equal 12. Below is the code, hope it helps.

Code in the file Bootstrap_3col.tpl

<div class="container-fluid" id="main-content" role="main">
<div class="row">
<div class="col-md-4" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
<div class="col-md-4" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content")
<div class="col-md-4" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")

Code in the file Bootstrap_3col.wap.tpl


After installing the responsive theme and the template, on both my Luminis 5.1 and 5.2.1 installations, Luminis just freezes went I try to select the bootstrap theme.
Has this happened to anyone else? Do you know about any solutions?