From the Release Notes:
Bootstrap 4 is the next major release of the open-source Bootstrap project. The first release was over 4 years ago, and each major release has brought with it significant changes. Currently, Bootstrap 4 is in alpha state, with a yet to be announced full release date. But we are adding the alpha version of Bootstrap 4 to the ExtLibX project now in order to start preparing for Bootstrap 4’s future release. By laying the foundation for Boostrap 4 in XPages in the ExtLibX project during the alpha phase, it will facilitate its addition to the core Extension Library in a prompt manner once Bootstrap 4 is actually released. Futhermore, it gives the XPages community the opportunity to contribute to the development of Bootstrap 4 support in XPages between now and its official release.
Notable Changes and Additions in Bootstrap 4
This section outlines some of the significant changes coming in the new version of Bootstrap, and how they may affect existing Bootstrap support in XPages.
- “rem”s – All typography sizes are now based on rem (root em) , ‘px’ and ‘pt’ are no longer used in the Bootstrap CSS for fonts. This means that all font sizes throughout Bootstrap 4 are set as a fraction of the font-size of the root html element. The default root font-size is 16px. This means that if you stick with that default value and set “font-size: 1rem” on an element, it will also be given a font-size of 16px. But you can scale up or down the font-size for individual elements, using other values such as “font-size: 2rem” (32px by default), “font-size: 0.5rem” (8px by default) and so on. This also means that if you change the font-size on the root html element, all font-sizes throughout your application will change accordingly. Thus it is very easy to adjust your application for different devices. The grid system of Bootstrap is also now based on rems, so one change to the font-size on the root html element will scale your entire application up or down. This makes life very easy when tailoring your application for different devices. In the XPages renderers and CSS, we have also adopted this approach, using rems wherever possible.
- Updated media queries – The media-queries in Bootstrap 4 now use ‘em’s instead of pixels, and they have 5 breakpoints for devices. Extra small (< 34em), small (< 48em), medium (< 62em), large (< 75em), and extra large (> 75em). The extra large size is new in Bootstrap 4, and comes with associated CSS classes for various components, using ‘xl’ to reference that size. For example ‘col-xl-4’, which specifies the grid column width of an element when using an extra large device.
- Cards – Cards have become a popular container element in recent time, and they are often added on top of Bootstrap 3 by those using it. Now Bootstrap 4 brings Cards into its feature set by default. They replace panels and wells from Bootstrap 3, providing a “flexible and extensible content container”. They come with customisable headers, footers & backgrounds, wrapping any content you wish to contain in them. And you can use Card Groups or Card Decks to group cards together. All in all a powerful new component that you can use to build your applications.
- Navbars refactored – The navbar component has been re-worked in Bootstrap 4. There have been changes to the structure, the CSS classes used, with new classes added, others removed and the underlying CSS properties updated. This is quite a significant change, as any navbar written for Bootstrap 3 will be completely broken when switching to Bootstrap 4. It is also a component heavily used in XPages, with both a dedicated navbar control and integrated navbars used in the application layout control. This is one of the first things we have tackled in the first release of the BootstrapX plugin in ExtLibX.
- Button classes – The ‘.btn-default’ CSS class has been removed in Bootstrap 4. A default button only needs the ‘.btn’ CSS class instead of ‘.btn .btn-default’ from older Bootstrap versions. There’s a new ‘btn-secondary’ class, to compliment the ‘.btn-primary’ class. And there are new outline buttons using classes of the format ‘.btn-XXX-outline’, where ‘XXX’ is replaced by ‘primary’, ‘secondary’ or ‘success’ etc.
- Glyphicons dropped – The glyphicons that were included in Bootstrap 3 have been left out of Bootstrap 4. To use any icon font, app devs would need to pull the resources into their applications themselves. However, the XPages team has decided to maintain a Bootstrap 3 version and a Bootstrap 4 version in the Extlib, in line with Bootstrap’s own support plan. Therefore, we’ve included the glyphicons from Bootstrap 3 as a resource in the Bootstrap 4 theme. This makes for a simpler transition from Bootstrap 3 themes to the Bootstrap 4 theme.
- IE8 support dropped – IE8 support in Bootstrap 3 was semi-supported, as it still required additional resources in order to work, e.g. the Respond.js project. In Bootstrap 4 though, support for the legacy browser is being dropped completely.
- Framework changes – There have been changes to the way that Bootstrap 4 is built. It uses SASS instead of LESS, the JS is entirely written in ES6 and generally it is easier to create your own customised version of Bootstrap. For XPages though, we are adding the default full version of Bootstrap 4 and build upon that with our renderers and theme(s) to provide Bootstrap 4 support in ExtLibX.
- Smaller footprint – Bootstrap 4 is roughly 30% smaller than its predecessor, which is a significant improvement. Every kilobyte counts when it comes to application performance, especially on mobile devices.
More information : Download Release Notes Bootstrap 4 ExtLibX
Sample database : TodoBootstrap4