Wt

Hello Wt Team,

I am trying to use raw Bootstrap 3.4.1 with Wt. I am aware that Wt supports Bootstrap theme, but it is modified for Wt and does not work well with responsive design(please check the Wt widgets gallery as an example). I am also aware that I can use WTemplate and not bother with using Wt widgets. But that is only part of the solution. I want the best of Wt and the best of Bootstrap to develop a responsive web app(should work on mobile screens). Hence I want raw bootstrap for my project. I tried the following code. But it does not work as Wt encapsulates everything in a giant web form. This creates problems for any web forms implemented in the application as HTML does not support nested forms. Is there a way to use raw bootstrap with Wt for responsive rendering? How do I make the following work?

class MyWtApplication : public Wt::WApplication
{
        public:
                MyWtApplication(Wt::WEnvironment const &env);
};

MyWtApplication::MyWtApplication(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<MyWtApplication>(env);
               });
}

The web_ui.xml file is as follows; it is nothing but the copy of Navbar example from Bootstrap(3.4.1) website (here)[https://getbootstrap.com/docs/3.4/components/#navbar]:

<?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">
                                                <div class="form-group">
                                                        <input type="text" class="form-control" placeholder="Search" />
                                                        </div>
                                                        <button type="submit" class="btn btn-default">Submit</button>
                                                </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>