When you build and run your web app in Xojo, you may wonder how to change all the predefined styles?

Well, first thing would to read in the Xojo documentation and you may find the page Changing the Appearance of Controls. There you can read that you can drop a replacement bootstrap.min.css into the project and Xojo will embed your version.

The file name must be exactly "bootstrap.min.css". Any other name is not recognized, so a bootstrap.css will not work as the min is missing. Min usually indicates that the file got pre-processed to remove spaces and make it smaller, but hard to read by the user. Actually your version of the css file doesn't need to be minimized this way and can be human readable. But the name is important.

But what is the default one? When your Xojo web app runs, you can append "framework/bootstrap.min.css" to the URL, e.g. "http://127.0.0.1:8080/framework/bootstrap.min.css" and view or download that file. You may prefer to get a formatted copy of that CSS from your browser. In Safari we can go to web information, then go to sources tab, open the Stylesheets section and click on "bootstrap.min.css". This gives us the nice version with 207248 Bytes compared to the minimized version with 159555 Bytes. There we see minimization saves about 25% on the spaces and returns.

Once change we want to make is to have the listbox use less height for the rows. Using inspector in both Safari and Chrome, we can find the <td> tag for the cell and look on the style attributes. You find that there is a padding of .75rem set. And the rem means in relation to the root element font height. So we can change the entry to .25rem here:

.table td, .table th {
    padding: .25rem;
    vertical-align: top;
    border-top:1px solid #dee2e6
}

Changing this entry to .25rem looks much better for a lot of lists we have. Your milage may vary of course. So maybe you start with customization in this order:

1. Pick a nice bootstrap theme. e.g. from bootswatch.com or build one with bootstrap magic
2. Make adjustments to the style by changing the CSS as needed or reference a second CSS to customize some CSS rules..
3. Use WebStyle objects to make small adjustments to controls in code.
4. You may even execute JavaScript to change some CSS on the fly.

The central styles make it easy to later make a change quickly.