Hi there is any sample or specific documentation with tms webcore how to use bootstrap 5 in it ? Thx
I've been using bootstrap 5 in my project and it works pretty well. I think the docs outline how to enable it for your project (Project pane -> Right-click on Project -> Manage Javascript Libraries?).
One area where it can be used (and where I use it the most often) is to add bootstrap classes to the various controls where needed. For example, to add a bit of padding at the start of the editor in the TWebEdit control, just add 'ps-1' to the ElementClassName for that control.
This handy little reference helps with figuring out what the bootstrap classes are if you're not already familiar with them:
Bootstrap 5 Cheat Sheet
I think pretty much all of the Web Core components have ElementClassName properties or related properties that can readily make use of bootstrap classes. There are many other areas where they can be used as well, depending on what it is you are trying to do.
I want known how and what include in the index.html page ? I can't see Project pane -> Right-click on Project -> Manage Javascript Libraries in my project.
More what libraries i must download to use it ? i downloaded "Compiled CSS and JS" from here : Download · Bootstrap v5.0 but how inlude those files in my project ?
thx
Ah. You can link to a CDN version directly like this, which I just took out of my project's HTML file. I think this is what the project settings do, but maybe with different versions or different CDNs.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
If you have a local copy, it would just be added in a similar way, pointing src= and href= to the locations in your project (typically in a js and css folder).
Ok fine ... but now i must use div class="container h-100" which i used with bootstrap 3.7 BUT now those instructions are in a sizing section in a _utilities.scss file !!! how use and include it ?
There are other settings that are in the Project Pane that are kinda handy to have around though. Not sure how to help with that.
Ctrl+Alt+F11 within the Delphi IDE should bring up the Project Pane if it isn't readily available otherwise. Or select the View/Projects menu to bring it up.
From there, your current project should be listed with its various files, like your Project.html file or whatever you've called it. At the very top of the list should be your project group and immediately below that is the name of your project. Right-click on that to bring up the menu that has the "Manage Javascript Libraries..." on it.
Hmmm... Kinda not clear where you're trying to get to here.
You can add a TWebHTMLDiv component to your form. In that component, there is a property called 'ElementClassName'. Just add "container h-100" to that property (without the quotes). When it runs, it will create a page with a DIV on it and with those classes added to it. If bootstrap was loaded properly, it will apply those classes the way you'd expect.
You don't have to deal with anything at the scss level hopefully - just add the classes to the components where you need them and it kind of takes care of itself. Not really much else to getting started with it.
Forgot to add that the bootstrap links have to be added at the top of the project's HTML file, between the <head></head> tags as is usually the case with this sort of thing.
And if you want to place something within the DIV, you can use a TWebPanel instead of a TWebHTMLDiv, adding the bootstrap 'container h-100' to the TWebPanel's ElementClassName. Then whatever you place inside the panel will be within the bootstrap container.
I'm not an expert on any of this stuff, but hopefully that gets you started?
Thank you Andrew, with local files installed of bootstrap5.0.2 all go fine . i've forgot to copy bootstrap files in deploy dir :)
Very good, happy to help! So many people have questions that are well beyond anything I know about, so if I see someone with a question I know something about, I try to help 
1 Like