Work with Bootstrap 3.3.6 in Liferay 6.2

Question

I'm working with Bootstrap 3 in Liferay 6.2. I inserted the bootstrap.css and bootstrap.min.js in the CSS and JS. I've also changed some style in my custom.css incompatilibilidad

Do you have a better idea of ​​it?

Then I attached the steps I followed to insert Bootstrap 3 in my Liferay 6.2. Well above gives me a few compatibility issues ... I would like your opinion, for eg if a more optimal code to work with these tools and these versions. I need your help to improve this and that everyone can work with Bootstrap 3 in Liferay 6.2. This is my two cents.

STEPS:

1 - Put the Bootstrap CSS, JS, and fonts in _diffs directory folder inside your theme

2 - We open or create the main.css file and make a call to the file Bootstrap.css

3 - On the portal_normal.vm add two calls to JavaScript with the name shown in the above scheme.

4 - We insert in custom.css CSS classes that conflict with the version 2.3.2 default one Liferay

--- custom.css ---

.signed-in .collapse {  display:block;  } 
.lfr-edit-layout-panel .collapse{  display:block; } 
.dockbar.navbar-static-top .collapse {      display: block;  } 
.navbar-inner .collapse{     display:block;   } 
.dockbar-ready section#content {    padding: 0 0 0 0;  }
 
.dockbar.navbar-static-top {
  background-color: transparent;
  padding: 0px;
}
.dockbar-messages{  display:none; }
 
.lfr-device-preview{  z-index: 1000;  }
 
.modal{   display:block; }
 
.modal-hidden{ display:none; }

Answer 1

What do you think of this one:

" You need to do some tricks to make parts of bootstrap 3 work within liferay.

I have worked with a designer who really wanted to have bootstrap 3 in some parts of liferay..

Here is hoe I have done it: On the theme project, into the css file, I copied the bootstrap libraries. On that folder I created a scss file with the following code:

.bootstrap-3 { @import "bootstrap"; }

where the bootstrap indicates a file to be included, according to the scss rules: _bootstrap.scss which was basically a file made from the original css.

The trick is to work with namespaces wherever you need to use the library.

When calling AJAX content, we just need to add the class.. some times the CSS rules get trickier due to the amount of classes and id liferay uses, but paying with priorities should solve..

I rather use this approach as it is easier to control conflicts with the original library..."