Wt

Dear Wt Team,

I am using the following code to use raw Bootstrap with Wt. The aim is to use in the project WTemplate as much as possible along with Bootstrap for the front-end. But at the same time take advantage of Wt's other features wherever possible. Do you see any problem with this approach to using Wt?

#include <memory>

#include <Wt/WTemplate.h>
#include <Wt/WApplication.h>
#include <Wt/WContainerWidget.h>

class JustWtApplication : public Wt::WApplication
{
        public:
                JustWtApplication(Wt::WEnvironment const &env)
                        : Wt::WApplication(env)
                {
                        setCssTheme("");
                        addMetaHeader(Wt::MetaHeaderType::HttpHeader, "X-UA-Compatible", "IE=edge");
                        addMetaHeader("viewport", "width=device-width, initial-scale=1");
                        useStyleSheet("bootstrap.min.css");
                        requireJQuery("jquery-1.12.4.min.js");
                        require("bootstrap.min.js");

                        setTitle("Wt Stylesheet");

                        messageResourceBundle().use("web_ui");

                        auto t = std::make_unique<Wt::WTemplate>(Wt::WTemplate::tr("navbar"));
                        root()->addWidget(std::move(t));
                }
};

int main(int argc, char **argv)
{
        return Wt::WRun(argc, argv, [](Wt::WEnvironment const &env) {
                        return std::make_unique<JustWtApplication>(env);
                });
}

and the template, web_ui.xml is as follows:

?xml version="1.0" encoding="UTF-8" ?>
<messages>
        <message id="navbar">
                <nav class="navbar navbar-default">
                        <div class="container-fluid">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="#">Brand</a>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                        <ul class="nav navbar-nav">
                                                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                                                <li><a href="#">Link</a></li>
                                                <li class="dropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li role="separator" class="divider"></li>
                                                                <li><a href="#">Separated link</a></li>
                                                                <li role="separator" class="divider"></li>
                                                                <li><a href="#">One more separated link</a></li>
                                                        </ul>
                                                </li>
                                        </ul>
                                        <!--form class="navbar-form navbar-left"--> <!-- Wt encapsulates the frontend into a giant form, so forms cannot be used in the frontend as HTML does not allow nested forms. Bootstrap allows using div instead of forms. -->
                                        <div class="navbar-form navbar-left">
                                                <div class="form-group">
                                                        <input type="text" class="form-control" placeholder="Search" />
                                                </div>
                                                <button type="submit" class="btn btn-default">Submit</button>
                                        </div>
                                        <!--/form-->
                                        <ul class="nav navbar-nav navbar-right">
                                                <li><a href="#">Link</a></li>
                                                <li class="dropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li role="separator" class="divider"></li>
                                                                <li><a href="#">Separated link</a></li>
                                                        </ul>
                                                </li>
                                        </ul>
                                </div><!-- /.navbar-collapse -->
                        </div><!-- /.container-fluid -->
                </nav>
        </message>
</messages>