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:

• https://github.com/odoo/odoo/commit/2b3017974bc7cd4b3a74f83c956224cfe4e5a918
• https://github.com/odoo/enterprise/commit/7d1789f2e28a704ff11a2b1c2a33e94a28a02333

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

• https://github.com/odoo/odoo/commit/770aec399c4e6e29cfc5854318cbda19a605315d
• https://github.com/odoo/enterprise/commit/066bc765abafeb7e42f81f551941cca1de90659e

Also, some other mixins are gone:

• https://github.com/odoo/odoo/commit/ea7c3f4a698bd027c307aef89fa2974916c4b9f5
• https://github.com/odoo/enterprise/commit/9d2a1c887749faed590a9b5e15e8496152cb4283

Media breakpoints and queries

• https://github.com/odoo/odoo/commit/0ca6d3977708c7f0203f042386115f24bcacf0aa
• https://github.com/odoo/enterprise/commit/6c6830dea949215cac3ac7cb30a308d6e4868e32

Display classes

• https://github.com/odoo/odoo/commit/7f10b55a5035bd3cab48ba58a519510a25b94f60
• https://github.com/odoo/enterprise/commit/701656b14ce7896603a02b1bc8cde37e1efef397

btn-default is now btn-secondary

• https://github.com/odoo/odoo/commit/c59380bac5bbd47bc7dcd92b38049af29a62c3d1
• https://github.com/odoo/enterprise/commit/b401c906334fc9d219a82fbdd0b3a04cf1f1062f

Dropdowns

• https://github.com/odoo/odoo/commit/1c1c0897e8eca607c7f1b96b68a06c026c543e6a
• https://github.com/odoo/enterprise/commit/8f2823cfb0bd8f4aec4cee65cf5c0620eda03cac

Bootstrap now uses REM units

• https://github.com/odoo/odoo/commit/4ac446e32846a6ddf582da687e40f68d0a0e3bc1
• https://github.com/odoo/enterprise/commit/4b624c1b9145829d30a17619983f9ef2f1abae0c

Navbar

• https://github.com/odoo/odoo/commit/09f40036b9c14161db90c6128861369c91c8c64e
• https://github.com/odoo/enterprise/commit/f760a0a0182632b0db640720d64b901117c5bd2f

Color system

• https://github.com/odoo/odoo/commit/d8c217a67d9f5b371dd43b9cff8f04aa008c27b8
• https://github.com/odoo/odoo/commit/318b10cce467fea7bd5f16564ed5218c5f3d0a48
• https://github.com/odoo/enterprise/commit/986802091f0268d46e81e610c55ae6cdff07078f
• https://github.com/odoo/enterprise/commit/a1d4342805895cf8fad252ba663bc2e71672bdcb

Columns

• https://github.com/odoo/odoo/commit/ed1b18f10348244ce26b8b27edbd59d91cee7772
• https://github.com/odoo/enterprise/commit/03da0a998a33230842ba5e70a45aa8ca46f50c7b

Cards

• https://github.com/odoo/odoo/commit/59237ea81988bdcd0cc746422a7c94bf2eadaaa2
• https://github.com/odoo/enterprise/commit/9ec4f901dce9a146d06e79695bd04e3e6c761e17