Tips and tricks: BS3 to BS4

Quentin Smetz edited this page Oct 12, 2018 · 1 revision

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

Display classes

btn-default is now btn-secondary

Dropdowns

Bootstrap now uses REM units

Navbar

Color system

Columns

Cards

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.