Gantry 5.5.x J4 - Bootstrap CSS needs updating.

[marktaylor46]

Joomla 4.2.3 now uses Bootstrap 5.1.3. Gantry 5 Bootstrap CSS file is using 5.0.2 so it needs updating to be the same as Joomla use.

[Flowman]

Question is why dose Gantry not just link to the /media/vendor/bootstrap folder. Then it does not need to be updated.

[ghost]

Because (I think) the bootstrap file is modified a little to ensure backwards compatibility.

[Flowman]

In this file we should link in Joomla bootstrap 5 and then override it like the file already have for b/c.

https://github.com/gantry/gantry5/blob/8885f9f4ec36875647db813090dfd65259679181/engines/joomla/nucleus/scss/bootstrap5.scss#L1

[ptrovatelli]

it's not just that the css is behind version wise. Some definitions are missing too. I'm seeing issues with displaying buttons : the background-color is set to transparent (as per .btn definition) due to lack of the correct definition (should be overriden by .btn-secondary for example) so it's hard to see there is a button at all (we can only see some text).

For example when using .btn-secondary : this class definition is simply missing from bootstrap5.css here even though the file is supposedly the one of bootstrap 5.0.2 as per the first line in file: https://github.com/gantry/gantry5/blob/5.5.16/engines/joomla/nucleus/css-compiled/bootstrap5.css#L1

/*! Bootstrap v5.0.2 (https://getbootstrap.com/) Copyright 2011-2021 The Bootstrap Authors Copyright 2011-2021 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */

By debugging the displayed page with chrome debugger, nothing related to the .btn-secondary class applies and the correct background-color of the button is missing. Tried other classes like btn-dark it's the same. btn-dark definition is not present at all in bootstrap5.css packaged by gantry. (more info about bootstrap buttons see https://getbootstrap.com/docs/5.0/components/buttons/ )

On the other hand, see these definitions from bootstrap source code for the same bootstrap version 5.0.2 https://github.com/twbs/bootstrap/blob/v5.0.2/dist/css/bootstrap.css#L2973

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

https://github.com/twbs/bootstrap/blob/v5.0.2/dist/css/bootstrap.css#L3153

.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

I've tried simply replacing gantry bootstrap file /media/gantry5/engines/nucleus/css-compiled/bootstrap5.css by the bootstrap.css embedded by joomla /media/vendor/bootstrap/css/bootstrap.css and it fixes the button issue. It changes a little bit the way the website is displayed too (for the better).

Before the fix:

After the fix:

With chrome debugger, after applying this fix, we can see that the .btn-secondary class is applied correctly:

Stack:

• joomla 4.3.2
• gantry 5.5.16 with helium
• fabrik 4.0gamma3 (the button is added by fabrik)

Fabrik element definition:

• Button type : button
• Bootstrap class : secondary
• Bootstrap icon : (empty)