Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Tips and tricks: BS3 to BS4
This page is meant to regroup some information to help migrate Odoo BS3 content to BS4 content.
The original merge commits for the base code migration:
Both contain lots of sub-commits with many details.
Lots of details are also described here of course: https://getbootstrap.com/docs/4.1/migration/ but here are some big changes that come with BS4:
Less support of older browsers. We only support the last version of every major browser. You must now stop using any vendor-prefixes mixins in your SCSS files. BS4 got rid of those and replaced them by the use of the autoprefixer library. As including that library in Odoo is not straightforward, we decided to not use it and to implement it ourself only when it is useful.
BS4 uses flex for lots of its components, which means that it is important that some components are direct children of some other ones. That's the case for columns inside rows for example.
Media breakpoints have changed:
------------------ | BS3 | BS4 | ------------------ 0 | XS | XS | -> Portrait Mobile 576 | / | SM | -> Landscape Mobile 768 | SM | MD | -> Portrait Tablet 992 | MD | LG | -> Landscape Tablet / Small Desktop 1200 | LG | XL | -> Desktop ------------------
Yes, this means that all our old col-md-* are now col-lg-, etc. The col-xs- classes have been replaced by col-* classes (no more "xs" to put). The column system is also better as we can now have columns with no fixed width which will take the space they need or the row's remaining space.
Most of the time, you should now use rem units instead of px units.
Components have changed + new utilities. No more hidden-* and visible-* classes, panels are replaced by cards, no more default spacing between components (use BS4 spacing utilities), no more
<ul/>elements for dropdowns, btn-default is now btn-secondary, form-horizontal has been removed, badge and label are now the same component, ... etc etc
Here are some links to the main commits for more details.
Vendor prefixes are gone
Also, some other mixins are gone:
Media breakpoints and queries
btn-default is now btn-secondary
Bootstrap now uses REM units