Bootstrap on a computer screen

The Scrivito Example App now Uses Bootstrap 4

With Bootstrap 4 finally being released to the wild and with all the new features, of course, we wanted the Scrivito Example App to have the latest and greatest. After all, the Scrivito Example App is our showcase for implementing the Scrivito CMS. While the change from Bootstrap 3 to Bootstrap 4 was not completely painless, the new features are well worth the update. 

This update will not affect you as a user of the Scrivito CMS product. However, those who use the Scrivito Example App as a base for their websites should be aware of the changes should you wish to merge in the latest code from the repository.

That said, here is what we did, why, and what to watch out for.

New NPM Package

We changed the NPM package we were using from “react-bootstrap” to “reactstrap” as the former is not currently supporting Bootstrap 4. We also saved a bit on the package size: 47.3 kB vs 28.2 kB minified and gzipped. We also liked their focus on composition and control. As well, they provide additional functionality for tooltips, popovers, and auto-flipping dropdowns we will explore in the future. When "react-bootstrap" releases a Bootstrap 4 compatible version, we will re-evaluate, but for now "reactstrap" provides what we are looking for.

Column Widget Update

We took advantage of the new Flexbox offerings in Bootstrap 4 to supercharge our column widget and provide it with more alignment options. You can now easily align content within columns to be aligned to the top, bottom, centered or stretched. These alignment options took a lot of work in Bootstrap 3 and did not work very well when responsive. This is by far the best update from Bootstrap 4 and, alone, worth the upgrade.

These new features utilize vertical alignment for all widgets and equal height for Box Widgets inside a column. The video below shows the editing view and the results of this change. As always, you can easily add more features to this widget – we just provide a good foundation you'll need for every project.

Box Widget Update

The box in Bootstrap 4 is a white background with a frame around it. Since our previous box widget was only transparent we decided we still wanted a transparent option to use with our design. Rather than creating two widgets we just upgraded the existing one. Over time your designs and editors will evolve as well, and with Scrivito you have complete flexibility.

Achtung, Gotchas and Planning

The biggest change to look out for and that will take some manual work – sorry 😬– is alignment. With the upgrade to Bootstrap 4, the alignment setting within widgets can change. Currently, this can be found in column widgets and headline widgets. For headline widgets, the default changed from “center” to “left”, so if you changed the settings, you will need to reset them as you intended. Also, the alignment is removed from widgets within the column widgets and will need to be reset.

Additionally, if you added custom styles to your project or created custom widgets or pages, there are changes needed to class names and the CSS. There are quite a few articles out there about these changes already, but you can check out our detailed article as well for some good examples and details as they pertain to the Scrivito ecosystem. If you want to see the code, and since the Scrivito Example App is open source, you can view the Pull Request and inspect all the changes that were required.

If you wish to download the latest version of the Scrivito Example App using Bootstrap 3, you can find it here:

Pull up Your Bootstraps and Enjoy

Well that is it in a nutshell. Like any great project, we will continue to upgrade and improve the Example App as we do with the Scrivito CMS itself. If you have any questions or need assistance upgrading your Scrivito website, feel free to reach out. Our support team is here to help you succeed!

Scrivito CMS: der Content-Hub für Ihre Websites und Apps

Scrivito CMS ist unsere komplette Unternehmenslösung für Digital-Experience-Plattformen, Websites und Webanwendungen der nächsten Generation. Als Software as a Service benötigt Scrivito keine IT-Wartung. Das Content-Management-System ist äußerst flexibel und erfüllt höchste Sicherheitsstandards.