Submit Feedback
Legacy Knowledge Base
Published Jun. 30, 2025

Using Bootstrap 5 in Liferay DXP

Written By

Kanchan Bisht

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack" publication program, made available for informational purposes. Articles in this program were published without a requirement for independent editing or verification and are provided"as is" without guarantee.

Before using any information from this article, independently verify its suitability for your situation and project.

Issue

  • Developers want to upgrade to or implement Bootstrap 5.x.x for custom sites and components in Liferay DXP.

  • The default Liferay environment uses vanilla JavaScript and React rather than Bootstrap 5.

Environment

  • Liferay DXP 7.4+

Resolution

Starting in DXP 7.4, the Liferay platform relies on vanilla JavaScript and React for optimal performance across browsers, removing native dependencies on jQuery and Bootstrap 5. While Bootstrap 5 is not provided out-of-the-box for default portal widgets, you can integrate it for your own custom development. To do so:

  1. Create a JavaScript Client Extension to inject Bootstrap 5's vanilla JavaScript into your site without relying on legacy portal-level jQuery.

  2. To apply Bootstrap 5 styling globally, replace clay.css with the Bootstrap 5 stylesheet within your custom theme architecture. Important: Doing this will cause out-of-the-box Liferay widgets to lose their default styling, but the DXP admin interface will remain functional via cadmin.

  3. Ensure any legacy jQuery settings are disabled in System Settings to fully transition to vanilla JavaScript implementations.

Additional Information

  • Bootstrap 5 has removed its dependency on jQuery, making it ideal to avoid using JQuery if feasible. See this third-party article for more information.

  • Regarding CVE-2024-6531: This CVE was rejected in the official CVE list because Bootstrap's JavaScript is not designed to sanitize unsafe HTML. Also, Liferay's code does not use the bootstrap carousel and the bootstrap.js resource is not served unless JQuery is explicitly enabled in System Settings.

NOTE
Liferay Support does not recommend or endorse specific third-party products over others. The information provided about products not created by Liferay is for reference purposes only, and any implementation of these principles will be at your team's discretion.

Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?