Wt

Currently only Bootstrap 3 i mean. But is on the Roadmap i think.

Yeah, at some point we'll probably want to integrate Bootstrap 4 too. It's just 2 and 3 at the moment. There's some extra CSS for Wt-specific things, but for the most part it's just stock bootstrap, without the Glyphicon Halflings set for licensing reasons.

I can't figure out how to apply Bootstrap styles to Wt widgets. Are there some examples of using bootstrap with wt?

You have to set the bootstrap theme, so:

Include the header:

#include <Wt/WBootstrapTheme.h>

Create an instance of the Bootstrap theme:

auto theme = std::make_shared<Wt::WBootstrapTheme>();

Set the theme's version to version 3 (the default is still 2):

theme->setVersion(Wt::BootstrapVersion::v3);

And apply the theme to the WApplication:

app->setTheme(theme);

Here's some more info about WBootstrapTheme: https://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WBootstrapTheme.html

I get the basics now of how to set a theme - but I'm struggling on how to apply Bootstrap theme elements to widgets, forms, etc.

Is there a complete example somewhere that shows the effect of styles?

Thanks

You need to copy the following directory to your 'docroot' directory

..Wt\lib\share\Wt\resources

Now Run the below program. I have edited 'Hello World' example just for you.

#include <Wt/WApplication.h>

#include <Wt/WBreak.h>

#include <Wt/WContainerWidget.h>

#include <Wt/WLineEdit.h>

#include <Wt/WPushButton.h>

#include <Wt/WText.h>

#include <Wt/WBootstrapTheme.h>

class HelloApplication : public Wt::WApplication

{

public:

HelloApplication(const Wt::WEnvironment& env);

private:

Wt::WLineEdit *nameEdit_;

Wt::WText *greeting_;

};

HelloApplication::HelloApplication(const Wt::WEnvironment& env)

: Wt::WApplication(env)

{

//Set the theme

auto theme = std::make_sharedWt::WBootstrapTheme();

theme->setVersion(Wt::BootstrapVersion::v3);

wApp->setTheme(theme);

setTitle("Hello world");

auto text = std::make_uniqueWt::WText("Your name, please? ");

//add bootstrap style to widget

text->addStyleClass("label label-primary");

root()->addWidget(std::move(text));

nameEdit_ = root()->addWidget(std::make_uniqueWt::WLineEdit());

Wt::WPushButton *button = root()->addWidget(std::make_uniqueWt::WPushButton("Greet me."));

button->addStyleClass("btn btn-success");

root()->addWidget(std::make_uniqueWt::WBreak());

greeting_ = root()->addWidget(std::make_uniqueWt::WText());

auto greet = [this] {

greeting_setText("Hello there, " + nameEdit_>text());

};

button->clicked().connect(greet);

}

int main(int argc, char **argv)

{

return Wt::WRun(argc, argv, [](const Wt::WEnvironment& env) {

return std::make_unique(env);

});

}