Liferay 6.2 with Bootstrap 3 (modify .aui)

Question

I would like to modify the .aui Liferay 6.2. Right now I have Liferay 6.2 with Bootstrap 3. When I use the .row and CONTAINER instead of using the bootstrap 3 me .aui gets by default. For example, if I put .row class is decentered because I is catching the .row Bootstrap 2.

I could go on my custom.css adding !important to use default Bootstrap 3, but I like see if there is a better way to do it.

I would like to use the .row Bootstrap 3 so that I do not add the padding of cabbage col-*-* because of the row-fluid.

Once you have Bootstrap3 fully running on Liferay 6.2, please share it - nobody has done (and shared) it so far. According to the various questions, you'd be a hero. That's to say that your problems probably don't end soon, you're fighting an uphill battle and it might be easier to accept 2.3 for now and wait for Liferay 7. — Olaf Kock, Mar 03 '16 at 22:13
Hello @OlafKock! Thanks for writing. I commented: I am currently working with Liferay 6.2 with Bootstrap 3. Incredibly have found no error "or the javascript, nor functionalities liferay own". I inserted the Bootstrap 3 on the theme of Liferay and have modified and added some classes specific to Liferay css that had incompatibilities to work with Bootstrap 3. The only problem I've found so far is that I have to work with .aui .row-fluid instead to work with the .row, which gives me a lot of padding between .row, .container and .col-*-*. — JMF, Mar 03 '16 at 22:37
@OlafKock I'm doing the theme of the new website of the University of La Rioja "Spain". Tomorrow I can teach a catch to show you that what I have done, does not give problems and am working smoothly with Bootstrap 3. Here I leave the ticket I opened in stackoverflow explaining how is this posible: http://stackoverflow.com/questions/35011112/work-with-bootstrap-3-3-6-in-liferay-6-2 — JMF, Mar 03 '16 at 22:38

score 1 · Answer 1 · edited Mar 27 '16 at 08:19

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.

Liferay 6.2 with Bootstrap 3 (modify .aui)

1 Answers1