Hi,
Is there any plan to upgrade frappe / erpnext to Bootstrap 5
5 Likes
I second this would be great time to upgrade
1 Like
Hi,
2 Likes
Also looking forward to Bootstrap 5.2+ since some SASS methods were changed from 5.1 to 5.2.
hsrai
March 14, 2025, 7:24am
5
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
March 16, 2025, 7:36am
6
Frappe v15 is using tailwind. Not sure if team wants to spend time in upgrading the bootstrap for v14.
hsrai
March 18, 2025, 4:47am
7
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:
Codecademy Tutorial for HTML/CSS Getting started with Bootstrap
Also found a recent feature-request:
opened 08:04PM - 17 Mar 25 UTC
feature-request
Frappe currently utilizes Bootstrap 4, which is now outdated. Bootstrap 5 introd… uces several enhancements that improve performance, maintainability, and user experience. Upgrading to Bootstrap 5 would align Frappe with modern web development practices and ensure long-term compatibility.
- Bootstrap 5 eliminates the need for jQuery, leading to improved performance and cleaner JavaScript.
- The updated Flexbox-based grid provides better responsiveness and additional utilities.
- This topic is currently being discussed in the Frappe
[forum discussion:](https://discuss.frappe.io/t/bootstrap-5-support/88547?u=hsrai
)
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.
frappe:develop ← frappe:dependabot/npm_and_yarn/bootstrap-5.0.0
opened 05:47AM - 10 Sep 24 UTC
Bumps [bootstrap](https://github.com/twbs/bootstrap) from 4.6.2 to 5.0.0.
<detai… ls>
<summary>Release notes</summary>
<p><em>Sourced from <a href="https://github.com/twbs/bootstrap/releases">bootstrap's releases</a>.</em></p>
<blockquote>
<h2>v5.0.0</h2>
<h2>Highlights</h2>
<p><a href="https://redirect.github.com/twbs/bootstrap/issues/32155">#32155</a>: Updated <code>make-col()</code> mixin to generate equal columns when no size is specified
<a href="https://redirect.github.com/twbs/bootstrap/issues/32763">#32763</a>: Added new <code>color-scheme()</code> mixin
<a href="https://redirect.github.com/twbs/bootstrap/issues/33389">#33389</a>: Dropdown menus now have option become clickable
<a href="https://redirect.github.com/twbs/bootstrap/issues/33453">#33453</a>: Added new docs footer
<a href="https://redirect.github.com/twbs/bootstrap/issues/33548">#33548</a>: Offcanvas header components are now vertically aligned
<a href="https://redirect.github.com/twbs/bootstrap/issues/33549">#33549</a>: Added offcanvas-top modifier
<a href="https://redirect.github.com/twbs/bootstrap/issues/33634">#33634</a>: Added support for <code>.dropdown-item</code>s wrapped in <code><li></code>s
<a href="https://redirect.github.com/twbs/bootstrap/issues/33626">#33626</a>: Fix v5 regressions in tab dropdown functionality</p>
<h2>🚀 Features</h2>
<ul>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/32763">#32763</a>: Add <code>color-scheme</code> mixin</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33389">#33389</a>: Dropdown — Add option to make the dropdown menu clickable</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33549">#33549</a>: Add offcanvas-top modifier</li>
</ul>
<h2>🎨 CSS</h2>
<ul>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/32155">#32155</a>: Add equal column mixin</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/32763">#32763</a>: Add <code>color-scheme</code> mixin</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33292">#33292</a>: Make accordion icon rotation more natural</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33411">#33411</a>: Fix validation feedback icon in select multiple</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33478">#33478</a>: Make <code>.nav-link</code> color consistent when using buttons</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33482">#33482</a>: Dropdown — Apply positioning only when Popper is not used</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33548">#33548</a>: Vertically align offcanvas header components</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33549">#33549</a>: Add offcanvas-top modifier</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33550">#33550</a>: Spinner alignment changes</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33598">#33598</a>: Hide validation icons from multiple selects</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33600">#33600</a>: Have $form-check-input-border's default derive from $black</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33607">#33607</a>: Reduce color-scheme complexity</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33642">#33642</a>: use <code>:read-only</code> css selector instead <code>[readonly]</code> for consistency</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33658">#33658</a>: fix: use list-group variable instead of alert</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33736">#33736</a>: accordion: fix <code>border-top</code> on Firefox</li>
</ul>
<h2>☕️ JavaScript</h2>
<ul>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/32439">#32439</a>: Decouple BackDrop from modal</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33245">#33245</a>: Decouple Modal's scrollbar functionality</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33249">#33249</a>: Simplify Modal Config</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33250">#33250</a>: Simplify ScrollSpy config</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33310">#33310</a>: fix: make EventHandler better handle mouseenter/mouseleave events</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33389">#33389</a>: Dropdown — Add option to make the dropdown menu clickable</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33429">#33429</a>: Remove element event listeners through base component</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33451">#33451</a>: Add missing things in <code>hide</code> method of dropdown</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33456">#33456</a>: Use our <code>isDisabled</code> util on dropdown</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33466">#33466</a>: Refactor dropdown's hide functionality</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33479">#33479</a>: Fix dropdown escape propagation</li>
<li><a href="https://redirect.github.com/twbs/bootstrap/issues/33496">#33496</a>: Use cached <code>noop</code> function</li>
</ul>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="https://github.com/twbs/bootstrap/commit/bf0936748602c8109fd916c64b4560799fa1c3f8"><code>bf09367</code></a> Release v5.0.0 (<a href="https://redirect.github.com/twbs/bootstrap/issues/33647">#33647</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/48ae5a7149d30d7d80cecbaaabaa88f7679c9172"><code>48ae5a7</code></a> Rewrite migration guide (<a href="https://redirect.github.com/twbs/bootstrap/issues/33834">#33834</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/f0865727b7d5f274a818510219e024d227affe11"><code>f086572</code></a> refactor(docs): Added form file input variables (<a href="https://redirect.github.com/twbs/bootstrap/issues/33833">#33833</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/1a54286befabfb8c18de420df4d7074ab7eb77b3"><code>1a54286</code></a> Fix doc typo and Bootstrap Icons link (<a href="https://redirect.github.com/twbs/bootstrap/issues/33832">#33832</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/e2df73fa9a2062ed5489a1bd80b9d0ddbf211a53"><code>e2df73f</code></a> Update migration guide for some v5 changes (<a href="https://redirect.github.com/twbs/bootstrap/issues/33829">#33829</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/1e6356ab43df6ca3e0c05499a4d690235fbd6fc7"><code>1e6356a</code></a> Neutralise more words from placeholder text (<a href="https://redirect.github.com/twbs/bootstrap/issues/33731">#33731</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/6633845901672cb642c0975e6fea3d1a1fa20058"><code>6633845</code></a> Bump eslint-config-xo from 0.35.0 to 0.36.0 (<a href="https://redirect.github.com/twbs/bootstrap/issues/33646">#33646</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/cb38744cf79b347ec2a32e0dcfe5c42402dc15ea"><code>cb38744</code></a> Tweak toast docs (<a href="https://redirect.github.com/twbs/bootstrap/issues/33810">#33810</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/c2ff22532e9f05d98b8db7c0b179d252387e77a3"><code>c2ff225</code></a> Bump rollup from 2.46.0 to 2.47.0 (<a href="https://redirect.github.com/twbs/bootstrap/issues/33818">#33818</a>)</li>
<li><a href="https://github.com/twbs/bootstrap/commit/c090ea2f4fbdc12e37def7c3bf9eb4c96c804d34"><code>c090ea2</code></a> Bump <code>@babel/preset-env</code> from 7.14.0 to 7.14.1 (<a href="https://redirect.github.com/twbs/bootstrap/issues/33819">#33819</a>)</li>
<li>Additional commits viewable in <a href="https://github.com/twbs/bootstrap/compare/v4.6.2...v5.0.0">compare view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
You can trigger a rebase of this PR by commenting `@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/frappe/frappe/network/alerts).
</details>
> **Note**
> Automatic rebases have been disabled on this pull request as it has been open for over 30 days.
hsrai
March 19, 2025, 1:34pm
9
This someone is not a real developer, and no one made changes to migrate from Bootstrap 4 to 5
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.
