Migration from Bootstrap 3.3.7 to Bootstrap 5.3.8 by MuhammadAashirAslam · Pull Request #922 · precice/precice.github.io

MuhammadAashirAslam · 2026-06-01T13:43:32Z

Upgraded Bootstrap from 3.3.7 to 5.3.8 CDN bundle (CSS & JS) in head layouts and removed obsolete IE8/9 compatibility layers.
Simplified HTML layouts by deleting nested row/column wrappers ("div-soup") around section headers, paragraph tags, and obsolete caret helper elements.
Replaced custom CSS classes with modern native Bootstrap 5 grid, flexbox, and alignment utilities (e.g., col-flex -> d-flex flex-column, vertical-align -> d-flex align-items-center, no-margin -> m-0).
Consolidated main styles by deleting modern-business.css and merging rules into customstyles.css.
Purged duplicate CSS rules, legacy browser vendor prefixes, and obsolete panel/card dual-class selectors from stylesheets.
Compensated for spacing changes by shifting the 20px bottom-margin from the removed headers globally to the .section-header class.
Realigned page footer components, custom workshops, and team grids using standard Bootstrap 5 container, rounding, and spacing parameters.
Removed jquery.min.js and jqueryui.min.js and rewrote all jQuery-dependent JS to vanilla DOMContentLoaded APIs.
Replaced the navgoco jQuery sidebar plugin with Bootstrap 5 native collapse component using data-bs-toggle attributes.
Removed unused theme-blue.css and theme-green.css.

Documentation:

BS5 Migration: https://getbootstrap.com/docs/5.3/migration/
Grid System: https://getbootstrap.com/docs/5.3/layout/grid/
Cards (replacing Panels): https://getbootstrap.com/docs/5.3/components/card/
Spacing: https://getbootstrap.com/docs/5.3/utilities/spacing/
Flexbox: https://getbootstrap.com/docs/5.3/utilities/flex/
Dropdowns: https://getbootstrap.com/docs/5.3/components/dropdowns/
Collapse: https://getbootstrap.com/docs/5.3/components/collapse/
Navbar: https://getbootstrap.com/docs/5.3/components/navbar/

- Upgraded Bootstrap from 3.3.7 to 5.3.8 CDN bundle (CSS & JS) in head layouts and removed obsolete IE8/9 compatibility layers. - Simplified HTML layouts by deleting nested row/column wrappers ("div-soup") around section headers, paragraph tags, and obsolete caret helper elements. - Replaced custom CSS classes with modern native Bootstrap 5 grid, flexbox, and alignment utilities (e.g., col-flex -> d-flex flex-column, vertical-align -> d-flex align-items-center, no-margin -> m-0). - Consolidated main styles by deleting modern-business.css and merging rules into customstyles.css. - Purged duplicate CSS rules, legacy browser vendor prefixes, and obsolete panel/card dual-class selectors from stylesheets. - Compensated for spacing changes by shifting the 20px bottom-margin from the removed headers globally to the .section-header class. - Realigned page footer components, custom workshops, and team grids using standard Bootstrap 5 container, rounding, and spacing parameters. Documentation: - BS5 Migration: https://getbootstrap.com/docs/5.3/migration/ - Grid System: https://getbootstrap.com/docs/5.3/layout/grid/ - Cards (replacing Panels): https://getbootstrap.com/docs/5.3/components/card/ - Spacing: https://getbootstrap.com/docs/5.3/utilities/spacing/ - Flexbox: https://getbootstrap.com/docs/5.3/utilities/flex/ - Dropdowns: https://getbootstrap.com/docs/5.3/components/dropdowns/

…image

…ustomstyles-precice.css

…ide buttons vertically

MakisH

I have gone through most of the changes and I have looked through all of the pages in "desktop view" and several pages in "mobile view". Here are some first comments (all the ones from #921 seem to have been resolved).

MakisH · 2026-06-05T13:22:20Z

That's a nice and long-overdue addition, thanks!

I wonder if we should use something more unique than the title (e.g., the filename where the data is drawn from), as the title could be duplicated (e.g., the slides and the post-proceedings paper of a conference). But that's not currently an issue.

MakisH · 2026-06-05T13:33:36Z

+  -
+    scope:
+      path: "content/index.html"
+      type: "pages"
+    values:
+      topnav: topnav


Why is this needed now but not previously?

MakisH · 2026-06-05T14:05:56Z

Do we need to port any of these changes to https://github.com/precice/precice.github.io/blob/master/pdfconfigs/prince-list.txt ?

MakisH · 2026-06-05T14:07:08Z

+{% comment %}
+  Recursive sidebar: renders nested doc nav from _data/sidebars via folder.folderitems.
+  Parameters: item (folder node), level (1–4), parent_id (element id for data-bs-parent accordion group).
+  Branch rows use BS5 Collapse (data-bs-toggle, .collapse.show); leaves are plain nav-links.
+  Active state compares page.url (no leading slash) to each item url.
+{% endcomment %}


Why is this needed, and how does it relate to sidebar.html?

Is this something standard, or something you implemented on top?

Sorry for the late reply, I missed this.

sidebar.html is the shell (title + top-level loop). sidebar_recursive.html does the nested part. It replaces navgoco after we dropped jQuery for BS5, walks _data/sidebars by calling itself, and sets active/expanded state in Liquid instead of client-side JS.

Same idea as Hugo's menu templates docs (recursive partial + active detection). We can then port it directly in the Hugo migration.

MakisH · 2026-06-05T14:09:46Z

+
+{% assign page_url_clean = page.url | remove_first: "/" %}
+
+{% assign itm = include.item %}


As a style comment, I would prefer longer and clearer indices instead of constructed shortenings (in this case, item instead of itm).

MakisH · 2026-06-06T07:59:13Z

 }

+/* Match the fixed collapsed navbar height on narrow screens. */
+@media (max-width: 1199.98px) {


Probably for a next PR: these hard-coded widths in media queries look a bit hacky. We should add some CSS preprocessor, or in some other way make these centrally configurable.

Thanks! i will look in to this

MakisH

Some more comments. I have now looked through the whole code, even though I only skimmed through some longer CSS additions, which I think need to be simplified.

MakisH · 2026-06-06T08:12:22Z

-        <img class="img-responsive col-xs-12" src="images/lead-image-precice.svg" alt="visualisation of how preCICE couples different solvers">
-        <!-- https://stackoverflow.com/questions/21943108/bootstrap-3-img-responsive-images-are-not-responsive-inside-fieldset-in-firefox -->
+        <img class="img-fluid col-12" src="images/lead-image-precice.svg" alt="visualisation of how preCICE couples different solvers">
+        <!-- https://stackoverflow.com/questions/21943108/bootstrap-3-img-fluid-images-are-not-responsive-inside-fieldset-in-firefox -->


Is this comment still needed? In any case, the URL should not be changed (it still works because of the encoded id).

Removed the comment

MakisH · 2026-06-06T08:16:59Z

-      </div>
-    </div>
+    <h2 class="section-header">Ready-to-use with your favourite open-source solver</h2>
+    <p class="mb-4">Several free and proprietary codes are currently coupled with preCICE. Pick one of our official adapters below or check out our <a href="community-projects.html">community projects</a>.</p>


An issue also with the current implementation: In too narrow screens, where only one card fits, still two are displayed. Maybe this is easy to fix.

MakisH · 2026-06-06T08:22:32Z

+
+.btn {
+  font-size: 14px;
+  line-height: 1.42857143;


Why this overly-specific number?

This comes from Bootstrap 3’s default line height: 20px / 14px = 1.42857143. The whole .btn block copies the old Bootstrap 3 button metrics (font-size: 14px, line-height: 1.42857143, padding: 6px 12px, border-radius: 4px) so the we keep the previous button height and spacing.

MakisH · 2026-06-06T08:27:21Z

+
 /* rightmost icons */
-.nav > li > a.nav-external {
+.nav :is(li > a, .nav-link).nav-external,


There are ~250 lines of new rules here, some quite specific. Why are they needed now and not before?

We should simplify as much as possible. It is not so important to look identical as before, as it is to look fine and be maintainable.

Many of these overrides were added to keep the layout close to Bootstrap 3 after switching to Bootstrap 5. Before, this was handled partly by Bootstrap 3 defaults and partly by the existing theme CSS. After the migration, plain Markdown tables/code blocks render differently because they do not automatically get Bootstrap 5 table utilities.

If we are ok with it, then we can remove some intentional overriding of things. For example, removing the table overriding will reduce around ~172 lines.

Tables:

On original site:

MuhammadAashirAslam added 3 commits May 28, 2026 21:06

style: address PR review feedback on CSS files and center about page …

c6172ef

…image

style: refactor remaining navigation selectors with modern :is() in c…

becba85

…ustomstyles-precice.css

This was referenced Jun 1, 2026

Migration from Bootstrap3.3.7 to Bootstrap 5.3.8 #921

Closed

Upgrade front-end framework #691

Open

update secondary button border color to black and align literature gu…

e1e993d

…ide buttons vertically

MakisH self-requested a review June 5, 2026 13:32

MakisH reviewed Jun 5, 2026

View reviewed changes

Polish Bootstrap 5 migration follow-ups

1217b22

MakisH reviewed Jun 6, 2026

View reviewed changes

Fix landing page review follow-ups

e2a2a61


		{% assign page_url_clean = page.url \| remove_first: "/" %}

		{% assign itm = include.item %}

Uh oh!

Conversation

MuhammadAashirAslam commented Jun 1, 2026

Uh oh!

MakisH left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MuhammadAashirAslam Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MakisH left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MuhammadAashirAslam Jun 6, 2026 •

edited

Loading