The Scrivito Example App now Uses Bootstrap 4

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.

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.

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.

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: https://github.com/Scrivito/scrivito_example_app_js/tree/bootstrap_3

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!