Bootstrap is the toolkit the Xojo Web framework uses to create the UI controls for your web projects. Bootstrap continues to improve and as a result we are working to upgrade the Web framework to the latest version. We are currently planning to ship this updated Web framework in Xojo 2023r2.
For most Xojo users, this update won’t require any changes at all to your existing projects. For those that create their own controls using the Web SDK, there will likely be a minor bit of work.
Dark Mode Support
The Web framework is currently the only Xojo framework that doesn’t support Dark Mode. Fortunately, Bootstrap 5 does. As with Desktop targets, users of your web projects will be able to decide between the light and dark modes. We plan for this to work identically to the way it works for your Desktop projects now. There will be a Supports Dark Mode Build Setting that will be off by default for existing projects and on by default for new ones.
More than Dark Mode
Visually, Bootstrap 5 comes with some subtle changes. For example the blue color it uses is still blue… but not that blue, helping to increase the contrast of your buttons.
You may notice that the buttons are a little bit rounder by default, following the latest design trends.
The look and feel of some input controls, like checkboxes and radio buttons, will be more similar between different browsers and operating systems.
Bootstrap 5 also includes new components and features, like Accordion and Offcanvas. These may find their way into future releases via the Web framework or from one of the third-party control developers.
Finally, Bootstrap 5 no longer depends on jQuery and it makes use of the latest CSS features which brings us to the next section.
Potential Migration Challenges
We’ve made it so most Xojo users won’t need to make any changes to their web projects. For example, we’ve adapted the Breadcrumb control to look like Bootstrap 4 by default. Generally speaking, if you are using the default theme and you aren’t using third-party controls, you won’t need to do anything special.
However, if you are currently using a custom Bootstrap 4 theme that uses a custom bootstrap.min.css file, it may not work properly. If you’ve downloaded the theme from a website such as Bootswatch, you can download an updated Bootstrap 5 compatible theme from the same site. Bootstrap 5 themes are actually easier to find than those for v4.
We are announcing this change to v5 in advance to allow third-party library developers the time to adapt their code and make use of the new Bootstrap 5 HTML and JavaScript API. If you rely upon any third-party controls for your web projects, you will need to upgrade them when new Bootstrap 5-compatible versions become available.
To make the migration as smooth as possible for everyone, we will continue including jQuery and provide independent betas, prior to releasing a version of Xojo with Bootstrap 5.
In the Bootstrap 5 Migration Guide you can find an extensive list of changes and improvements since Bootstrap 4.6.
If you have any questions, please feel free to ask on the Forum. Users attending the Xojo Developer Conference can also meet and talk in person with Xojo engineers, about this or any other topic.