Wt

Hi, I'm trying to write basic bootstrap Wt app trying to reproduce the following basic example: http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/

I've found some difficulties to get the desired result. It seems generated Wt code doesn't match bootstrap formatting

1.- Navbar: it can be fixed on top but text is left aligned

It seems I need a way to insert a <div class = "container"> before <div class="navbar-header">

boostrap code:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">

Witty code:

<div id="olhq9po" class="navbar-fixed-top navbar-header navbar navbar-default">
    <div style="">
      <button id="olhq9pk" type="button" class="navbar-toggle btn btn-default with-label" style="display: none;">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
      <div class="navbar-header">
    <button id="olhq9pj" type="button" onclick="var e=event||window.event,o=this;if($(o).hasClass('disabled')){Wt4_0_4.cancelEvent(e);return;}Wt._p_.update(o,'sc',e,true);" class="navbar-toggle btn btn-default with-label" style="">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
    <a id="olhq9pm" class="navbar-brand"><span id="olhq9pl">Project name</span></a>
      </div>
      <div id="olhq9pn" class="navbar-collapse" style="display: none;"><ul id="olhq9ph" class="navbar-left navbar-nav nav" style=""><li id="olhq9pg"><a id="olhq9pf" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey||(Wt4_0_4.button(e) > 1))return true;else{if($(o).hasClass('disabled')){Wt4_0_4.cancelEvent(e);return;}Wt._p_.update(o,'s16',e,true);}"><span id="olhq9pe"><span id="olhq9pd" style="white-space:nowrap;">Home</span></span></a></li><li id="olhq9pc"><a id="olhq9pb" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey||(Wt4_0_4.button(e) > 1))return true;else{if($(o).hasClass('disabled')){Wt4_0_4.cancelEvent(e);return;}Wt._p_.update(o,'s17',e,true);}"><span id="olhq9pa"><span id="olhq9p9" style="white-space:nowrap;">About</span></span></a></li><li id="olhq9p8"><a id="olhq9p7" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey||(Wt4_0_4.button(e) > 1))return true;else{if($(o).hasClass('disabled')){Wt4_0_4.cancelEvent(e);return;}Wt._p_.update(o,'s18',e,true);}"><span id="olhq9p6"><span id="olhq9p5" style="white-space:nowrap;">Contact</span></span></a></li></ul></div>
    </div>
  </div>

2.- Body page header

2a.- Text is overlapped by navbar

2b.- Horizontal line is not under the title (h1)

Here is my code (written for the purpose of this post):

std::unique_ptr<Wt::WApplication> createApplication(const Wt::WEnvironment& env)
{
    auto app = std::make_unique<Wt::WApplication>(env);
    auto root = app->root();

    app->setTitle(APP_TITLE);
    auto appRoot = app->appRoot();


    auto appTheme = std::make_shared<Wt::WBootstrapTheme>();
    appTheme->setVersion(Wt::BootstrapVersion::v3);
    app->setTheme(appTheme);


    app->messageResourceBundle().use(appRoot+"assets/strings");
    app->messageResourceBundle().use(appRoot+"assets/templates");
    app->useStyleSheet("assets/css/sticky-footer-navbar.css");

    ////////////////////////////////////////////////////////////////////////////////
    // Fixed navbar | begin

    // Create a navigation bar with a link to a web page.
    Wt::WNavigationBar *navBar =  root->addWidget(std::make_unique<Wt::WNavigationBar>());
    navBar->addStyleClass("navbar-fixed-top");
    navBar->addStyleClass("navbar-header");
    navBar->setTitle("Project name");
    navBar->setResponsive(true);

    // Setup a Left-aligned menu.
    auto leftMenu = std::make_unique<Wt::WMenu>();
    auto leftMenu_ = navBar->addMenu(std::move(leftMenu));

    leftMenu_->addItem("Home");
    leftMenu_->addItem("About");
    leftMenu_->addItem("Contact");

    // Fixed navbar |end
    ////////////////////////////////////////////////////////////////////////////////


    ////////////////////////////////////////////////////////////////////////////////
    // page header container | begin

    auto wcph = root->addWidget(std::make_unique<Wt::WContainerWidget>());
    wcph->setStyleClass("container");
    auto pageHeader = wcph->addWidget(std::make_unique<Wt::WContainerWidget>());
    pageHeader->setStyleClass("page-header");
    pageHeader->addWidget(std::make_unique<Wt::WText>("<h1>Sticky footer with fixed navbar</h1>"));
    pageHeader->addWidget(std::make_unique<Wt::WText>("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales porttitor augue ut ornare.</p>"));

    // page header container | end
    ////////////////////////////////////////////////////////////////////////////////


    ////////////////////////////////////////////////////////////////////////////////
    // sticky footer | begin

    auto wcpf = root->addWidget(std::make_unique<Wt::WContainerWidget>());
    wcpf->setStyleClass("footer");
    auto wcpContent = wcpf->addWidget(std::make_unique<Wt::WContainerWidget>());
    wcpContent->setStyleClass("container");
    wcpContent->addWidget(std::make_unique<Wt::WText>("<p class=\"text-muted\">Place sticky footer content here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales porttitor augue ut ornare.</p>"));

    // sticky footer | end
    ////////////////////////////////////////////////////////////////////////////////

    return app;

}

Additional CCS style (sticky-footer-navbar.css):

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

Attached screen captures from Witty and bootstrap example.

Can anybody help me?

Regards

Manuel