This module breaks Bootstrap 3 features (e.g. carousel)

Created on 14 January 2022, almost 3 years ago
Updated 13 February 2024, 9 months ago

Problem/Motivation

The module adds Bootstrap 4 as a dependency, but the "bootstrap-languages" library uses Bootstrap 3. This results that the website uses this module includes two different versions of Bootstrap library. This also breaks e.g. Bootstrap 3 Carousel feature.

Proposed resolution

Drop Bootstrap 4 dependency and rewrite the template file to be compatible with Bootstrap 3.

🐛 Bug report
Status

Needs review

Version

1.0

Component

Documentation

Created by

🇭🇺Hungary lonalore Budapest, Hungary

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇨🇦Canada danrod Ottawa

    The module has been upgraded to use Bootstrap 5, but the bootstrap-languages project still uses Bootstrap 3, I just forked the project (https://github.com/danrod96/bootstrap-languages) and I am working on upgrading the project to Bootstrap 5.

  • 🇦🇹Austria jordik

    Is there a way to make this module Bootstrap version independent?
    The Drupal Bootstrap 3 is still used by roughly 115.000 pages vs approx. 5.000 with Bootstrap 5.

    I would argue, that we do not need to download additional JS and CSS in languages_dropdown.libraries.yml if the underlying theme is Bootstrap. So in essence, we have to remove the last line to avoid any bootstrap version conflicts:

    dependency-js:
      remote: https://github.com/FezVrasta/popper.js
      version: VERSION
      license:
        name: MIT
        url: https://github.com/FezVrasta/popper.js/blob/master/LICENSE.md
        gpl-compatible: true
      js:
        https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js: { type: external, minified: true }
        <strong>https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js: { type: external, minified: true }</strong>
  • Status changed to Needs review 10 months ago
  • 🇦🇹Austria jordik

    So, here is something that worked for me - removed the bootstrap CSS.
    In case the language selector has to work also on non-bootstrap themes, I would suggest to leave the styling to the site builders and also avoid adding the bootstrap CSS, as it currently conflicts with non-bootstrap themes (e.g. Adminimal).

  • 🇨🇦Canada danrod Ottawa

    This isn't working for me for non-bootstrap themes at all, I need the BS Js to load.

  • Status changed to Needs work 10 months ago
  • Status changed to Needs review 10 months ago
  • 🇦🇹Austria jordik

    For a non-bootstrap theme the JS is loaded. I disabled the CSS.

  • 🇨🇦Canada SKAUGHT

    @danrod
    we could re-version released to target bootstrap 3,4,5 themes. then we know the theme has the 'right js version'.

Production build 0.71.5 2024