Bootstrap 5 support

[logicallimit]

Hi,

Is there any plan to upgrade frappe / erpnext to Bootstrap 5

[LukeRoberts]

I second this would be great time to upgrade

[Jecintha]

Hi,
Bootstrap 5 have many updates. Is any possible to update bootstrap 5 in ERPNext V14 any time soon, Or Is there a process to upgrade to Latest version of bootstrap manually.

[anjanesh]

Also looking forward to Bootstrap 5.2+ since some SASS methods were changed from 5.1 to 5.2.

[hsrai]

Is there sufficient demand felt to put efforts to migrate from Bootstrap 4 to latest Bootstrap 5, if someone willing to put efforts, and sufficient benefits are obtained?

or official developers are thinking to move to vue.js + tailwind (might be using FrappeUI)?

What is the official direction?

[Varun]

Frappe v15 is using tailwind. Not sure if team wants to spend time in upgrading the bootstrap for v14.

[hsrai]

I doubt. Any proof?

Prerequisites does mention about bootstrap, and not thing about tailwind:

3. HTML / CSS

If you want to build user interfaces using Frappe Framework, you will need to learn basic HTML / CSS and the Bootstrap CSS Framework.

Resources:

1. Codecademy Tutorial for HTML/CSS
2. Getting started with Bootstrap

Also found a recent feature-request:

Frappe should replace bootstrap 4 to bootstrap 5

[sukhlotey]

In the frappe official Github I have created an issue and got reply that someone sent the PR of updated bootstrap 5 here but did’t accepted by official’s.

chore(deps): bump bootstrap from 4.6.2 to 5.0.0

[hsrai]

@sukhlotey

… got reply that someone sent the PR of updated bootstrap 5

This someone is not a real developer, and no one made changes to migrate from Bootstrap 4 to 5

[sukhlotey]

So the PR was just an automatic dependency update by Dependabot and didn’t include the necessary changes for a proper migration from Bootstrap 4 to 5. That makes sense! So, does that mean a manual migration effort is required if we want to upgrade to Bootstrap 5.
Then how long it can be??
.
Umm my friend used bootstrap 5 in frappe application.
And he took 2 seconds to implement the bootstrap 5 in his application via CDN

[ahassoun]

In my case, it’s not a UI/DX matter, but rather a security/compliance issue, given that Bootstrap 4.6.2 reached end of life on January 1, 2023, and has several known vulnerabilities.

Has anyone dealt with and managed a similar situation?

[ahassoun]

I gathered some info, can anyone confirm any of those solutions?

Below is an expanded, side‑by‑side look at Tidelift (“Sonar OSS”), HeroDevs NES, and OpenLogic LTS—followed by practical guidance on how each option behaves inside a Frappe/ERPNext build that ships Bootstrap 4.6.2 via npm/esbuild.

---

Executive snapshot

• Tidelift (now a Sonar company) is a package‑catalog subscription: you keep using upstream Bootstrap 4.6.2, while Sonar/Tidelift supplies CVE alerts, SBOM, license vetting, and, where a maintainer partners with them, back‑ported patches. It is the cheapest way to get governance, but it is not a new binary distribution.
• HeroDevs NES delivers a drop‑in replacement npm package (bootstrap-nes) that already contains patched source and an SLA (14‑day fix). No code changes—just swap the dependency and add an auth token.
• OpenLogic LTS offers a private registry with patched tarballs (bootstrap‑4.6.2‑lts.<rev>), tickets answered by OSS experts, and guaranteed fixes until 31 Dec 2030.

In Frappe, all three integrate without touching your Python code: you merely adjust package.json (HeroDevs / OpenLogic) or run a CLI scanner (Tidelift). The esbuild pipeline then bundles the updated CSS/JS exactly as before.

---

Option 1 — Tidelift (“Sonar OSS Catalog”)

How it works

Feature	Details
Delivery model	Metadata stream + optional patch PRs; you keep bootstrap@4.6.2 from the public npm registry.
Coverage	Thousands of projects; security, license, EOL intel, SBOM.
Patching	When a maintainer signs on, Tidelift ships a patched release; otherwise you receive a mitigation recipe.
SLA	“Assurances” rather than strict timelines, but Sonar is merging SCA+SAST and promises unified remediation workflow later in 2025.
Cost	Low four‑figures USD/yr for <100 developers (bulk pricing across all packages).
Ideal for	Teams that already run SonarQube/SonarCloud and need supply‑chain compliance more than hot‑fix binaries.

Plug‑and‑play in Frappe

1. Keep "bootstrap": "4.6.2" in package.json.
2. Run tidelift analyze (or Sonar’s new unified CLI) in CI; it parses the same package-lock.json that Frappe produces.
3. Accept pull‑requests or patch files generated by Tidelift for any Bootstrap CVE.

Build impact: none—esbuild still bundles from node‑modules.

---

Option 2 — HeroDevs Never‑Ending Support (NES)

How it works

Feature	Details
Delivery model	Authenticated npm scope (@nes/bootstrap4) that is binary‑compatible with bootstrap@4. Drop‑in swap.
Coverage	Bootstrap 2, 3, 4; also Angular, Node, Spring, etc.
Patching	HeroDevs publishes patched versions within 14 days of any CVE.
SLA & compliance	SOC 2, HIPAA, PCI wording in contract.
Cost	Mid‑4 to low‑5 figure USD/yr per org (quote‑based).
Ideal for	SaaS apps stuck on Bootstrap 4 that must show an auditor a hard SLA.

Plug‑and‑play in Frappe

// package.json (snippet)
"dependencies": {
  "bootstrap": "npm:@nes/bootstrap4@4.6.2-secure", // 1️⃣ swap
  "@popperjs/core": "^2.11.2",
  "jquery": "3.7.0"
}

npm config set //registry.nes.herodevs.com/:_authToken YOUR_TOKEN   # 2️⃣ auth
npm i && node esbuild --production                                   # 3️⃣ build

Nothing else changes—Frappe’s esbuild keeps the same import path; icons, SASS mixins, and data‑attributes remain intact.

---

Option 3 — OpenLogic Bootstrap LTS

How it works

Feature	Details
Delivery model	Private npm (or tarball) repo hosting bootstrap‑4.6.2‑lts.<rev>.
Patch horizon	All medium+ CVEs, browser breakage, jQuery shifts, until 31 Dec 2030.
SLA	24×7 support, unlimited tickets.
Extras	Consulting hours, migration roadmap help.
Cost	Competitive if you already buy other Perforce / OpenLogic LTS products.
Ideal for	Enterprises needing a multi‑year runway but eventually upgrading to Bootstrap 5.

Plug‑and‑play in Frappe

npm config set @openlogic:registry https://artifacts.openlogic.com/npm/
npm i @openlogic/bootstrap@4.6.2-lts.1
# Or, if using tarball:
npm i https://artifacts.openlogic.com/bootstrap-4.6.2-lts.1.tgz

Update import alias in esbuild if package name differs. Re‑run bench build or node esbuild.

---

Build‑pipeline compatibility matrix

Step	Tidelift	HeroDevs NES	OpenLogic LTS
package.json change	None	Yes (dependency string)	Yes (dependency + registry)
Additional CLI tool	Tidelift/Sonar scan (optional)	Token setup	Registry login
esbuild / bench build	Unchanged for all three	Unchanged	Unchanged
Risk of CSS class / JS API drift	Same as original 4.6.2	Guaranteed identical APIs (drop‑in)	Guaranteed identical APIs (drop‑in)

Frappe imports Bootstrap globally through window.bootstrap and import 'bootstrap'; statements inside its JS modules; since none of the three options rename classes or break Sass variables, no Python or Desk code is affected.

---

Choosing the best fit

• Need governance only? → Tidelift (cheapest; pairs well with SonarQube pipelines).
• Need binary patches & infinite runway? → HeroDevs NES (true “never‑ending”).
• Need binary patches but only until 2030? → OpenLogic LTS (often cheaper if you bundle other OSS support).

Remember: Bootstrap 4 entered EOL on 1 Jan 2023—the official team will never release 4.6.3. If you keep Frappe on 4.x for more than a few months, one of these paid paths—or a full migration to Bootstrap 5 inside Frappe v16+—is strongly recommended.

---

Next actions

1. Trial the free HeroDevs NES token on a dev branch; measure bundle diff (~0 bytes).
2. Request both OpenLogic and HeroDevs quotes—their pricing is opaque and often negotiable.
3. If governance is your main gap, enable SonarCloud + Tidelift CLI in CI; export the SBOM to satisfy auditors.

With these steps, you can keep your Frappe apps secure today while budgeting a clean migration path for tomorrow.