1. Home
  2. Development
  3. Using Bootstrap with Liferay 7.1

Using Bootstrap with Liferay 7.1

Kevin Neibarger, modified 6 Years ago.
Using Bootstrap with Liferay 7.1
Regular Member Posts: 105 Join Date: 2/2/18 Recent Posts
Does anyone have a good tutorial on using Bootstrap modal's in Liferay 7.1? I actually went here and copied the code for HTML, JS and CSS into my view.jsp and when I loaded my portal the portlet looked fine but nothing could be clicked, not even the control panel!! Here is the CodePen site

https://codepen.io/jkrehm/pen/OybdrW

If Liferay 7.1 is running Bootstrap 4, this should work, but it locks everything up.. 
Marta Santos, modified 6 Years ago.
RE: Using Bootstrap with Liferay 7.1
New Member Posts: 22 Join Date: 3/21/17 Recent Posts
Hello Kevin,

I believe that this might be happening because your div class="modal fade" is on top of everything else on the page.



You can probably solve this by changing it's display css.

Hope this helps.

Best regards,

Marta Santos
Kevin Neibarger, modified 6 Years ago.
RE: Using Bootstrap with Liferay 7.1
Regular Member Posts: 105 Join Date: 2/2/18 Recent Posts
Thanks Marta,

Since the CSS seems to built in with the version of bootstrap I don't know where I need to change this CSS. Where do I need to put the CSS so it overrides .modal?
Marta Santos, modified 6 Years ago.
RE: Using Bootstrap with Liferay 7.1
New Member Posts: 22 Join Date: 3/21/17 Recent Posts
Hi Kevin,

You can just add it in your portlet next to the rest of the css.


Best regards,

Marta Santos
Porto AJ, modified 6 Years ago.
RE: Using Bootstrap with Liferay 7.1
New Member Posts: 5 Join Date: 5/6/19 Recent Posts
Followed quick start instruction here https://clayui.com/docs/get-started/introduction.html
But once I deployed my Portlet and click on the Sign In. It supposed to prompt for login . 
But only shows the fade nothing else.

On the other hand, modal works.

Any Idea on how to fix this? using Liferay 7.1 as well

Attachments: