Assuming I want to use a Bootstrap theme in Xojo (and assuming that some UI controls like buttons and generic labels might be automatically interpreted as html elements by Bootstrap inside the Xojo IDE) how does one refer to a Bootstrap class inside the code of a UI control (like a custom list box or custom rectangle)?
Thank you
fritz
You will always use a Bootstrap theme with Xojo Web 2.0, up until Xojo2023r1.1 you will use Bootstrap 4.6.x, starting with Xojo2023r2 you will use Bootstrap 5.3.x
There are other classes used for the listbox (for example) as that is based on datatables.
You can modify the CSS class by adding your code to the App HTML Header, or create new classes and use JavaScript to add those classes to the control you want.
There are Feature Requests to make it easier to refer to custom classes in Xojo (I don’t have the numbers at hand).
Is there anything specific that you want to do/change?
Your question is not clear enough 
Are you talking about subclasses in the IDE or custom controls using the WEB SDK?
Are you talking about Bootstrap classes like this: Typography · Bootstrap v5.3 ?
It is probably not clear enough because I don’t know how to do it. I want to use Bootstrap in a Xojo web project and change the theme. I think I know how to change the theme, but I want to know how to modify the look of some controls (with the Bootstrap classes) after I change the theme. I don’t know how Xojo maps its UI controls to html elements and I don’t know how to assign a control a Bootstrap class. I could, in some cases, subclass a control. Or, I could create my own CSS class in the App Header, but that seems to defeat the purpose of using a CSS framework like Bootstrap. My question is: How to leverage Bootstrap by assigning UI controls a CSS class from Bootstrap? And, just as important, what UI Controls are addressed by Bootstrap, and how? When I create a Rectangle, is that identified as a “DIV” in Bootstrap? Or is all that hard-coded in Xojo?
I am certainly not talking about the Web SDK. That is way above my pay grade. I am not a huge fan of Bootstrap actually, but since it seems to be the only way to enforce a theme on my Xojo web pages, I’d like to know how to use it in Xojo. On a plain HTML page, it’s pretty straightforward. In Xojo, however, the way to apply styles to UI elements is not clear to me.
Thank you
fritz
Alberto
I know I can write a class in the App Header, but I would want to use the names that Bootstrap uses to stay in its hierarchy like I would in HTML. I don’t use Bootstrap in HTML web projects because I write my own CSS, so I’m unfamiliar with the Bootstrap names. Normally if you want to modify Bootstrap classes in an HTML page, you write custom CSS in a separate file and override the Bootstrap, Maybe you can do this in the App HTML Header too?
It’s interesting that you mention Datatables. Is there a place in the documentation that has a mapping of Xojo controls to HTML elements (or Bootstrap definitions for HTML elements)? It seems some people like you know all about how this is done, but I’ve read nothing about it in the docs nor have I seen videos.
I am happy to add classes to the HTML Header, but I’m passing on the Javascript. Escaping Javascript is part of the allure, for me, of a Xojo-based web project. Besides, I’ve read a little on how to use javascript in Xojo and it looks too much like a root canal. At least with HTML it was messy sometimes but relatively manageable after you got it to work.
Thank you
fritz
Start by dropping a new bootstrap theme on the navigator which uses the same selectors that the base one does. It should be able to give you a pretty good approximation.
Do someone have some curated collection of working and good themes?
Ahhh, ok, that is clear.
Xojo is suposed to be RAD… But the controls dont have acces to use the classes directly.
Exactly… I made a feature request to implement this las year: https://tracker.xojo.com/xojoinc/xojo/-/issues/71233
And there a re related ones a few years old: https://tracker.xojo.com/xojoinc/xojo/-/issues/61630
So dont hold your breath on that.
You need to “hack” the elements manually runing some Javascript to add or remove the classes. something like:
ExecuteJavascript( "$('#" + MyButtonName.ControlID + "_button').removeClass('btn-light').addClass('btn-primary');" )
Well, the web framework is a little weird, and yes, it is hard-coded in xojo. The best approach for this is to create controls and then use the chrome developper tools to inspect the generated HTML code and see what can you hack running some Javascript.
You can get something like this:
by just dropping the bootstrap.min.css from this Theme into Xojo Web 2023r1.1 project:
https://bootswatch.com/4/sketchy/
Is this what you are looking for? Or do you only want to modify some aspects of the default Theme used by Xojo?
I haven’t used a Bootstrap editor to create a Bootstrap theme yet but I understand there are several places online that offer something to create/modify themes.
Take note that starting with Xojo2023r2 you will need to use Bootstrap 5 themes (the above link is to the Boostrap 4 version that can be used in Xojo2023r1.1).
Hi Rick
https://bootswatch.com is a good source of free (and paid) themes (if you’re using Bootstrap).
There’s a site called bootstrap.build, which looks like it could be useful. The configurator tool is slow and some graphic features like shadow don’t appear to validate your choices. I’ve tried to start an account but it does not work for me. However, it looks like just the thing you’d need if you were going to configure a Bootstrap theme. I downloaded a theme easily.
peace
fritz
Greg
That is a good idea. I have just started doing that. I’m just downloading themes willy-nilly and trying them out. I have to try them on a couple of projects because I’m not seeing much difference yet.
Thank you
fritz
I’ve already inspected it after Alberto’s post, thank you.
Just keep in mind that the IDE itself does not have a full CSS renderer. It pulls key attributes from the styles that are used to render each built-in control to approximate the appearance so you can correctly position the controls. You will need to run the project to see the actual final result.
Ivan
Even though this answer is not necessarily what I wanted to hear, it’s reassuring to know that I’m not missing something. I took a look at the feature requests you and the other gentleman sent and I see that this is a problem that will not be solved any time soon.
I don’t blame the management for not getting this straight yet, because they’ve got a limited programming staff. But fixing this is not even on their road map.
Oh well, I can write classes in the App Header. That ExecuteJavascript thing looks interesting and worth investigating, but I don’t know if this actually accomplishes the goal I’m presuming we all have in mind. Compartmentalizing our code and adhering to the DRY formula.
On the positive side, your javascript example is the first one I’ve seen that seems straightforward, probably because I’ve seen javascript invoked in discussions of WebSDK, which I am determined not to touch. As a basically unambitious sort, my thought is that if it looks more than 5 times more involved than just doing in on a web page with PHP, I’ll just do it in PHP.
Also, I’ve learned to do some of the styling with subclasses, and this has the advantage in that I can take some or most of these classes to the desktop environment as well.
Thank you for this very complete assessment of my problem. I will surely try the Javascript just for giggles. And I will put the Bootstrap questions aside. I never liked Bootstrap anyway (too many class names to memorize).
peace
fritz
Greg
I hear that. Fortunately, compared to Node,js anyway, Xojo’s compile times are usually pretty good for the dinky little projects I’ve managed so far, so running the project frequently is now second nature.
Thank you
fritz
Alberto
For any Bootstrap theme I’ve ever seen, I’m going to end up modifying just about everything. That’s why I didn’t use it back when I was spending a lot of time on web development. It was easier for me to write CSS from scratch. Although, if you care to memorize a lot of classes in Bootstrap, the responsiveness is a great payoff. However, I’m assuming we can’t leverage that aspect of Bootstrap.
I’m going to play with some themes as you suggest. No doubt being able to actually spend some quality time in bootstrap, build will be a major step forward.
Thank you for your response. Between the three of you folks, I am able to see a clear path forward. I’m not exactly happy with the status quo, but my options are so much clearer.
peace
fritz