Prestashop: Bootstrap 4.0.0 limited css support

Created on 8 Jul 2020  路  4Comments  路  Source: PrestaShop/PrestaShop

Is your feature request related to a problem?

Some features of bootstrap 4 are not working. For example, it's not possible to rearange the order of columns.
After long searching, I found it is because PS is using bootstrap 4.0.0-alpha.5 and the Bootstrap 4.0 order classes are not supported.

Since PS is using Bootstrap 4.0, I would expect to be able to use the full power of Bootstrap 4, at least when it comes to css classes.

Describe the solution you'd like

Simply update bootstrap to more current version.
The order classes are supported from 4.0.0. I tested and confirmed this using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Example to reproduce and test

  1. Go into any template file, or use a cms page.
  2. Add the following code in html to simulate the problem:
<div class="row">
  <div class="col-md-6 order-last">
    Should be <strong>last</strong>
  </div>
  <div class="col-md-6 order-first">
    Should be <strong>first</strong>
  </div>
</div>
  1. See the result in front end.

Additional context

  • Using PS version: 1.7.6.5

Most helpful comment

Hi, I'm afraid we are well aware of this issue (and we agree it's a big issue) but there is nothing we can do.

See this answer from @eternoendless :
"The development team in charge of the original 1.7 decided, back in the day, to develop new themes ("classic" for the FO and "new theme" for the BO) using the not-yet-released-at-the-time bootstrap 4. As they tell me, they thought that Bs4 would be final in time for final release of 1.7, and started working with the alphas... with turned out to be a very bad call.

Bs4 Alpha 6 was released in January 2017, after initial release of PS 1.7.0 (Nov 2016). Worse, that alpha switched the grid model to flexbox, breaking everything. Since most themes are based on classic (as mickaelandrieu explained), upgrading Bs4 in classic would break existing themes. So we are stuck.

In PrestaShop 8, we'll be able to switch to a new theme. In the meantime, there's classic-rocket which is basically an improved classic theme."

So we are "stuck" with bootstrap 4.0.0-alpha.5 and cannot upgrade it for Classic Theme without introducing a breaking change that would impact thousand of themes being used with PrestaShop 1.7.

But you can use another theme like classic-rocket which does not have this constraint 馃槈

All 4 comments

Thanks for opening this issue! We will help you to keep its state consistent

Hi, I'm afraid we are well aware of this issue (and we agree it's a big issue) but there is nothing we can do.

See this answer from @eternoendless :
"The development team in charge of the original 1.7 decided, back in the day, to develop new themes ("classic" for the FO and "new theme" for the BO) using the not-yet-released-at-the-time bootstrap 4. As they tell me, they thought that Bs4 would be final in time for final release of 1.7, and started working with the alphas... with turned out to be a very bad call.

Bs4 Alpha 6 was released in January 2017, after initial release of PS 1.7.0 (Nov 2016). Worse, that alpha switched the grid model to flexbox, breaking everything. Since most themes are based on classic (as mickaelandrieu explained), upgrading Bs4 in classic would break existing themes. So we are stuck.

In PrestaShop 8, we'll be able to switch to a new theme. In the meantime, there's classic-rocket which is basically an improved classic theme."

So we are "stuck" with bootstrap 4.0.0-alpha.5 and cannot upgrade it for Classic Theme without introducing a breaking change that would impact thousand of themes being used with PrestaShop 1.7.

But you can use another theme like classic-rocket which does not have this constraint 馃槈

@matks Hah, thanks for pointing that out. I understand.
My theme is allmost finished so it's too late to switch to classic-rocket. But thanks for that!
For now, I will work around it with some custom css.

Closing the issue as I think the discussion is complete

Was this page helpful?
0 / 5 - 0 ratings