Bootstrap - How to use?

Targets Web
1

Hello all,
Please forgive my ignorance but I am hoping I will become more educated with the responses to this post.

How to use Bootstrap?

I understand to drag it into the navigator, that’s the easy part. But how to use it after that? When I launch the app in debug mode the opening pages login button is the color orange that it should be. However in the subsequent pages, no buttons are orange (with or without a mouse over). Why is that?

Also, how does one change the font size? And the button size, to match the different selections in the bootstrap?

While I’m at it, how to change the background colors to that of the theme; and on which objects is this supported? I see that “indicator” is not a property of all controls.

Is there any docs that explain this? I checked the help for Bootstrap but there’s very little and no sample project to see it in action either.

All help/suggestions are appreciated!
Tim

1 Like
2

That depends on the Indicator. You can have a Default button (that will react if you press Enter/Return that will be Indicator Primary), you can have a Cancel button (that reacts to ESC key that will have Indicator Default), then you can have other buttons and you can select different Indicators.

You can use the IDE or use Style.

Xojo designed the Button height at a default and if you want buttons with different height you need to add some CSS to override this restriction (not at my computer right now, I can post some code later). There is a feature request to allow other bootstrap button sizes, remove the height limit all together, and another to bring the bootstrap outline buttons to Xojo too.

Also with Style and BackgroundColor (I think?). See the Style options offered in the IDE.

I hope this get you started.

Edit: we use this code in App HTMLHeader to allow buttons in different heights:

<style>
.btn-group { height: 100%!important; }
</style>

Note: copied from an old post (I will check our current project to see if this is it.

3

Thank you Alberto!
Tim

4

Tim;

Everything that @AlbertoD told you is good. You can however go much farther. You can start with online CSS generators, and crreate a custom bootstrap.min.css that will replace the stock file provided by Xojo. The online generators will take you a good part of the way, but not all the way. You will have to finish the job yourself. You can edit your custom css file with a text editor, which I found very difficult to do. There are also applications to make the job easier. I chose Stylizer 7, but there are others. The attached screen shot is from an application that I am upgrading from Web 1 to Web 2 (and enhancing, too). Notice that the text field that has the focus is lightly colored. The focus ring is gone and the border is different than other fields. I find that more elegant. Fonts are specific, the primary color is specific, control sizes are specific also. Everything is made to measure so to speak. It does take a long time and a lot of trial and error before you get it right at first, but you can do pretty much everything you want once you know where to look. Some controls are quite hard to get right.

2024-03-26_18-50-54
2024-03-26_18-50-541374×740 51.6 KB

In hope that this can be useful to you.

LD

5

Hi Louis

Thanks for your post. I’ll look at the Stylizer 7 app you suggested
Tim

6

Here an online CSS generator that I like. Someone on the forum recommended it. I can’t remember who: https://bootstrap.build/app

7

Hi Everyone.

I was not so much worried about a new/custom bootstrap, but how to use the one I have?

I see how the Indicator is used to select the color from the theme, but now how to select the Typography (text) sizes?

A few more questions:
Can Typography, (text) sizes, be done as a global command?
Can the indicator be set as a global command so ALL buttons have the same indicator? If so, once these are set, can individual buttons be changed so only specific buttons/fields etc have different indicators?

One more, how to change the Indicator for WebTextFields?

Where can I find more info about these? I seem to be a bit challenged with the docs lately.

Thanks again!
Tim

8

https://documentation.xojo.com/topics/text_handling/working_with_fonts.html#topics-text-handling-working-with-fonts-web-fonts

https://documentation.xojo.com/api/user_interface/web/webstyle.html

I haven’t looked for a way to do this.

Maybe you can subclass the WebButton and copy from that, if you need a different button just copy/drag one from the IDE.

Indicators are for buttons and controls made out of buttons. You can use the Web Style (link above) to change colors to WebTextFields.

1 Like