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

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!

Learn more about enterprise SaaS CMS Scrivito

More great blog posts from Antony Siegert

  • Integrating Mailchimp with Scrivito

    There are a myriad of ways to collect email addresses to communicate with your audience. Mailchimp is one of those, and, if you are not familiar with it, you should check them out. Mailchimp is an all-in-one marketing platform that provides quite a lot of features. The most basic feature is...

  • Expanding Scrivito’s Pricing Options

    Announcing new pricing options for Scrivito As we expand the feature set of Scrivito, we also have to determine the most appropriate pricing model for our customers. We have always considered pricing to be an important factor, but the fact remains that the product needs to grow, and requests from...

  • Example App Updates

    What is new in the Example App? The Example App has been a big part of the Scrivito journey, not only for you – our customers – but also for us as developers. We developed the Example App to showcase some of what could be done when implementing a Scrivito-based app. It is used, every day, to test...

  • Customizable Page Menus

    Scrivito’s top-right menu is customizable! Menus can make editors’ lives much easier, and we have had several requests to add items to the menu to aid in a more efficient content generation. So, our developers worked hard and took our mantra of complete developer flexibility to heart. Beginning...

  • A/B Testing with Scrivito and Google Optimize

    Fine tuning a website takes time, and there are many options to consider. But when it really comes down to it, it's important to find out if the visitors are happy with the improvements. To do this, we need to compare their reactions to the present and the improved versions of the pages...

  • How to Create a Blog Post in the Example App

    Creating a blog post is simple with the Example App. A blog post has an author, so we will want to add our author page, too. Every blog post page consists of a title, a subtitle, and a widgetlist. The widgetlist is where you will build up the body of the blog post using the available widgets in...

  • Testing Your Scrivito-Based Rails App 

    The question of how to test Scrivito-based apps comes up less often than you would expect, but none the less it is asked. Remember that Scrivito is just Ruby, but being mainly an API, there are some caveats. It is best kept in mind what Scrivito is, a Content Management System, so your testing...