A Quick Reminder About What Bootstrap Is

As I will be mentioning it during this post, let me take a moment to remind readers what Bootstrap is, and what are we using it for at Xojo.

Bootstrap is the library we use for the visual part of web applications made with Xojo. You can think about it as Gtk on Linux, or UIKit on iOS.

While there is a vast amount of alternative libraries, it’s been probably the most popular framework for the last decade. You can check the Bootstrap website for more information.

ColorGroup Named Colors

Until this release, the Named option when configuring a ColorGroup was not available on web projects. 2024r3 brings the ability to choose from the Web Basic colors, Web Extended colors and, what I find more interesting, Bootstrap colors, which also support dark mode out of the box.

As you can expect, if you drop a custom Bootstrap 5.3 theme with another set of colors, the IDE will automatically update in order to preview them.

Using Named Colors by Code

When a dynamic need arises, it is also possible to use Bootstrap Named colors programmatically, if you find it easier. Here is an example:

Var colorName As String

If paymentCardIsValid Then
  colorName = "success"
Else
  colorName = "danger"
End If

Rectangle1.BackgroundColor = ColorGroup.NamedColor(colorName)

Or in a WebCanvas.Paint event:

Var colorName As String = If(paymentCardIsValid, "success", "danger")
g.DrawingColor = ColorGroup.NamedColor(colorName)
g.FillRectangle(0, 0, g.Width, g.Height)

You can check the list of available colors in the Color section of the official Bootstrap documentation. Basic and Extended Web Colors will work as well.

Using Bootstrap CSS Classes

Bootstrap comes with a set of utility CSS classes for a variety of visual things. You probably won’t need them all, as the Xojo IDE will get you there in most of the cases, and we work hard improving the IDE to make it easier, release by release.

That said, if you are an advanced user, and you have previous experience working with Bootstrap, you may find it useful to add CSS classes directly from the Inspector.

Go to the Advanced tab, add some Bootstrap CSS classes, separated by spaces… and voilà!

Here is a demo:

We have included a new example, called “Applying Bootstrap CSS classes to controls”, that you can find under Platforms > Web. Please give it a try.

CSS Classes are not limited to Bootstrap, if you have added styles in the HTML Header section, you can use them as well.

You can also add and remove them using the new CSSClasses property, which is available in every WebUIControl subclass.

WebRectangle Got Some Love

You won’t need to setup the border color, border thickness or the corner size, for WebRectangle, in the Opening event anymore.

When designing web applications, I found myself using a lot of WebRectangle controls and, by default, they have a rounded border.

The side-effect is subtle, but now that you can control the border radius directly from the Inspector, the IDE preview will be closer to how it will look in the browser. And you are going to avoid writing a few lines of code!

In addition, some Bootstrap themes define a different Corner Size. Setting this property to “-1” will honor that Bootstrap theme’s default border radius.

Conclusion

As always, the release comes with much more than I can tell you about in one blog post. With over 30 Bug fixes and 9 Feature Requests implemented in the Web target alone, make sure to take a look at the Xojo 2024r3 Release Notes to see the whole picture.

Happy coding!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Have you ever stumbled upon a website or app and been instantly captivated by its design? That’s the magic of great visual appeal. And guess what? You can bring that same magic to your Xojo web app with the help of Bootstrap themes.

Imagine your app not just as a tool, but as a full visual-interactive experience for your end-users. Whether you’re a design newbie or a seasoned pro, these themes offer a seamless way to enhance your web app’s look and feel.

This tutorial will equip you with all the knowledge to select and use Bootstrap themes for your Xojo web apps. By the end of this guide, you’ll have the tools and confidence to create a visually appealing, user-friendly app that turns heads and wins hearts.

What are Bootstrap themes and why use them in Xojo?

Bootstrap is a popular front-end framework that helps developers create responsive and visually compelling web applications. Bootstrap themes are pre-designed templates built with this framework, making it easier to achieve a professional look with minimal effort.

Xojo, by default, uses a modified Bootstrap theme for its web apps. This means that right out of the box, your Xojo web app already benefits from Bootstrap’s design and sleek aesthetics. There are countless pre-designed themes available online, both free and premium, that you can incorporate into your Xojo web app. These themes can dramatically alter the visual appearance of your app, offering various aesthetic options to suit your needs.

Now that you have a basic understanding of Bootstrap and its role in Xojo, let’s move on to how you can actually implement and customize these themes in your web app.

Step 1: Choose a Bootstrap theme

First, you need to choose a Bootstrap theme that fits the look and feel you want for your Xojo web app. There are numerous resources on the web where you can find free or premium Bootstrap themes. For maximum compatibility with Xojo, we recommend using themes from Bootswatch. Bootswatch provides a variety of free, Xojo-compatible Bootstrap themes.

Step 2: Preview and download the theme

On the Bootswatch website, click the “Preview” button for any theme to see how it will appear.

Once you find a theme you like, click the menu next to the theme’s “Download” button and select the file named bootstrap.min.css. This is the only file you need.

Step 3: Add the theme to your Xojo web app project

Now for the easiest step. Once you have the desired bootstrap.min.css file, simply drag and drop it into the Navigator panel of your Xojo project.

After adding the bootstrap.min.css file to your project, Xojo’s layout editor will instantly reflect the new theme. Moreover, your web app will utilize this theme when running.

Congratulations! You’ve now learned how to incorporate and apply Bootstrap themes to your Xojo web application.

Remember, the right theme can make your web app not just functional, but memorable. And with the countless options available, you’re sure to find a Bootstrap theme that perfectly matches your vision. Don’t hesitate to experiment with different themes and make adjustments as needed to get the perfect look for your app.

Now it’s your turn to put it into practice and create web apps that not only work well but look fantastic too.

If you have any questions or run into any issues, feel free to refer to the official Xojo documentation for more detailed information.

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

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. For Web projects, there is now 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.

If you are still curious about Bootstrap 5 specifically, you can view the Bootstrap 5 Migration Guide where 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.

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

Dark Mode Support and Bootstrap 5

You can now create web applications with Xojo that respects users’ Dark Mode preference with Bootstrap 5.

There is a new WebSession.ColorMode property you can use. It will be set as Auto by default, meaning it will match the user’s OS appearance preference, but it can also be forced to Light or Dark. It can be changed at runtime and per session.

While not everyone likes Dark Mode, some of your end users will appreciate this. Due to medical circumstances, they might actually need it, so please consider adding support even if you don’t like dark interfaces.

If you want to enable Dark Mode in your previous projects, you will have to manually enable the setting in the Shared Build Settings section (which is turned on by default on new projects):

Color Groups can also be used nearly everywhere, and they will be used in the IDE preview when you toggle between Light and Dark Mode:

In order get Dark Mode support ready for Web, we had to upgrade our internal Bootstrap dependency from v4.6.1 to v5.3.0, which is a huge leap by itself. Bootstrap 5 comes with a refreshed color palette, new components, modernized existing controls and bug fixes. Please check our previous Bootstrap 5 is Coming to the Xojo Web Framework blog post.

If your application wasn’t using a custom Bootstrap Theme (bootstrap.min.css), everything should look more or less the same except for the subtle color palette differences and rounder buttons. Bootstrap 4 themes aren’t supported in Bootstrap 5, please replace it with a v5 theme if needed. Not every theme supports Dark Mode, but the one included in Xojo does.

If you are a theme builder, please check the Bootstrap’s Color Modes documentation. You can also find free Bootstrap 5 themes available at Bootswatch.

We also want to send a big thank you to our third party developers for their effort adapting their Open Source and Commercial plugins and controls to Bootstrap 5. You can learn about what they offer at the Xojo Extras Store and in the Open Source Projects page in the Xojo Documentation.

Accessibility

Navigating and using web applications with the keyboard makes everyone’s life easier. In Xojo 2023r2 we’ve upgraded WebPagination and WebBreadcrumb controls, which are composed of more than one focusable item. Your users will be able to properly use the tab key to go through them.

We plan to continue working on improving Accessibility. Please open a new Issue if you find anything that can help you and your end users.

WebListBox

DataTables, the internal dependency we use for bringing your tables to life, has been upgraded from v1.10.20 to v1.13.4. This recent version includes support for Bootstrap 5 and a few bug fixes that some users were facing in their web projects.

You can now disable your WebListBox by setting its Enabled property to False so your users won’t be able to interact with it. And also, if you were missing this feature that’s in the DesktopListBox, you can now add Variant tags to your columns, using the new WebListBox.ColumnTagAt.

Last but not least, this control comes with a visual Inline Editor, like in its Desktop counterpart:

WebChart

Chart.js, the underlying library we use for WebChart, has been upgraded from v2.9.3 to v4.2.1. Again, we’ve done everything we could on our side so you don’t have to do anything.

The only exception is with the WebChart.OverrideOptions event. If you are currently using it, you’ll have to check the library documentation as the internal options JSON has changed.

You can expect the new DesktopChart features to be working on WebChart, like configuring how the lines look like (including the endpoints), background images or prefix and suffixes. Read New Additions to DesktopChart, MobileChart and WebChart to learn more.

Web SDK

If you are using third party controls, you will notice some of them now have a custom icon in the IDE Library. But even more important, they will use less memory at runtime.

Are you developing Open Source or Commercial Web SDK controls? Remember there is a dedicated Web SDK forum where you can ask any questions you may have.

IDE Performance and Improved CSS Support

Bootstrap 5 makes use of the latest CSS features. We took the opportunity to rethink our CSS parser and improve its performance at the same time. As a result, the IDE preview looks even closer to what you see in the browser, and we render everything faster.

Wrapping Up

Over 50 bug fixes and features were included just for Xojo Web in Xojo 2023r2. Please find a full list in the Release Notes. read more about Bootstrap 5 and updates to WebChart on the Xojo Programming Blog. We are looking forward to hearing your thoughts and seeing what you’re building with Xojo! See you in the forum!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

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.

Themes

Xojo now uses Bootstrap themes, one of which is built-in and used by default. These themes control the entire appearance of all controls from sizes, to colors, to whether or not corners are rounded and more. There are a lot of publicly available Bootstrap themes so if you don’t care for the built-in one, you can find one on the Internet you like and simply drop it into your project to have it automatically replace the default theme. You can find high-quality, free and Xojo-compatible themes at bootswatch.com. Click the Preview button for any theme on that site to see what parts of the appearance of controls will change.

To use one of the the themes at Bootswatch.com, click the Download button’s menu (not the button itself) and choose the file titled bootstrap.min.css. That’s the only file you need and it must have that file name to work in Xojo. Once you have downloaded your theme, drop it into your project to use it.

Here’s just a tiny sample of the preview of the Superhero theme:

Customizing Individual Controls

This doesn’t mean you can’t customize individual controls. You still can. Some have properties available you can set in the Inspector but all have a Style property that can be changed via code. You can change background color, border color, border thickness, drawing color, opacity as well as font information such as the font itself, size, bold, italic, and strikethrough. You can even add animation through CSS transitions. If you have experience in CSS, you can set just about any property using the Value method.

Transitioning Control Appearance from Web Framework 1.0 to 2.0

Big transitions are rarely easy. However, the bigger your project is, the more time you’ve likely spent creating dozens of styles and then applying them to many of your controls. Themes solve this problem. You choose a theme, drop it in and the appearance of controls across your entire project is updated. If you are building an app for an organization that already has specific colors and appearance standards in place, using themes in Xojo makes it easy for them to provide you a theme that you can drop in to make sure the app you create for them matches those standards.