Not render style bootstrap

Hi, I have a problem with yo-yo

`const page = require('page')
const empty = require('empty-element')
const template = require('./template')
const yo = require('yo-yo')

page('/', () => {
var main = document.querySelector('body')
empty(main).appendChild(template())
})`

This is template :
`const yo = require('yo-yo')

module.exports = () => {
return yo <div class="wrapper"> <div class="sidebar-wrapper"> <div class="user"> <div class="info"> <div class="photo"> <img src="" /> </div> <a data-toggle="collapse" href="#collapseExample" class="collapsed"> <span> Chet Faker <b class="caret"></b> </span> </a> <div class="clearfix"></div> <div class="collapse" id="collapseExample"> <ul class="nav"> <li> <a href="#profile"> <span class="sidebar-mini">Mp</span> <span class="sidebar-normal">My Profile</span> </a> </li> <li> <a href="#edit"> <span class="sidebar-mini">Ep</span> <span class="sidebar-normal">Edit Profile</span> </a> </li> <li> <a href="#settings"> <span class="sidebar-mini">S</span> <span class="sidebar-normal">Settings</span> </a> </li> </ul> </div> </div> </div> <ul class="nav"> <li class="active"> <a data-toggle="collapse" href="#dashboardOverview" aria-expanded="true"> <i class="ti-panel"></i> <p>Dashboard <b class="caret"></b> </p> </a> <div class="collapse in" id="dashboardOverview"> <ul class="nav"> <li class="active"> <a href="../dashboard/overview.html"> <span class="sidebar-mini">O</span> <span class="sidebar-normal">Overview</span> </a> </li> <li> <a href="../dashboard/stats.html"> <span class="sidebar-mini">S</span> <span class="sidebar-normal">Stats</span> </a> </li> </ul> </div> </li> <li> <a data-toggle="collapse" href="#componentsExamples"> <i class="ti-package"></i> <p>Components <b class="caret"></b> </p> </a> <div class="collapse" id="componentsExamples"> <ul class="nav"> <li> <a href="../components/buttons.html"> <span class="sidebar-mini">B</span> <span class="sidebar-normal">Buttons</span> </a> </li> <li> <a href="../components/grid.html"> <span class="sidebar-mini">GS</span> <span class="sidebar-normal">Grid System</span> </a> </li> <li> <a href="../components/panels.html"> <span class="sidebar-mini">P</span> <span class="sidebar-normal">Panels</span> </a> </li> <li> <a href="../components/sweet-alert.html"> <span class="sidebar-mini">SA</span> <span class="sidebar-normal">Sweet Alert</span> </a> </li> <li> <a href="../components/notifications.html"> <span class="sidebar-mini">N</span> <span class="sidebar-normal">Notifications</span> </a> </li> <li> <a href="../components/icons.html"> <span class="sidebar-mini">I</span> <span class="sidebar-normal">Icons</span> </a> </li> <li> <a href="../components/typography.html"> <span class="sidebar-mini"><i class="ti-panel"></i></span> <span class="sidebar-normal">Typography</span> </a> </li> </ul> </div> </li> <li> <a data-toggle="collapse" href="#formsExamples"> <i class="ti-clipboard"></i> <p> Forms <b class="caret"></b> </p> </a> <div class="collapse" id="formsExamples"> <ul class="nav"> <li> <a href="../forms/regular.html"> <span class="sidebar-mini">Rf</span> <span class="sidebar-normal">Regular Forms</span> </a> </li> <li> <a href="../forms/extended.html"> <span class="sidebar-mini">Ef</span> <span class="sidebar-normal">Extended Forms</span> </a> </li> <li> <a href="../forms/validation.html"> <span class="sidebar-mini">Vf</span> <span class="sidebar-normal">Validation Forms</span> </a> </li> <li> <a href="../forms/wizard.html"> <span class="sidebar-mini">W</span> <span class="sidebar-normal">Wizard</span> </a> </li> </ul> </div> </li> <li> <a data-toggle="collapse" href="#tablesExamples"> <i class="ti-view-list-alt"></i> <p> Table list <b class="caret"></b> </p> </a> <div class="collapse" id="tablesExamples"> <ul class="nav"> <li> <a href="../tables/regular.html"> <span class="sidebar-mini">RT</span> <span class="sidebar-normal">Regular Tables</span> </a> </li> <li> <a href="../tables/extended.html"> <span class="sidebar-mini">ET</span> <span class="sidebar-normal">Extended Tables</span> </a> </li> <li> <a href="../tables/bootstrap-table.html"> <span class="sidebar-mini">BT</span> <span class="sidebar-normal">Bootstrap Table</span> </a> </li> <li> <a href="../tables/datatables.net.html"> <span class="sidebar-mini">DT</span> <span class="sidebar-normal">DataTables.net</span> </a> </li> </ul> </div> </li> <li> <a data-toggle="collapse" href="#mapsExamples"> <i class="ti-map"></i> <p> Maps <b class="caret"></b> </p> </a> <div class="collapse" id="mapsExamples"> <ul class="nav"> <li> <a href="../maps/google.html"> <span class="sidebar-mini">GM</span> <span class="sidebar-normal">Google Maps</span> </a> </li> <li> <a href="../maps/vector.html"> <span class="sidebar-mini">VM</span> <span class="sidebar-normal">Vector maps</span> </a> </li> <li> <a href="../maps/fullscreen.html"> <span class="sidebar-mini">FSM</span> <span class="sidebar-normal">Full Screen Map</span> </a> </li> </ul> </div> </li> <li> <a href="../charts.html"> <i class="ti-bar-chart-alt"></i> <p>Charts</p> </a> </li> <li> <a href="../calendar.html"> <i class="ti-calendar"></i> <p>Calendar</p> </a> </li> <li> <a data-toggle="collapse" href="#pagesExamples"> <i class="ti-gift"></i> <p> Pages <b class="caret"></b> </p> </a> <div class="collapse" id="pagesExamples"> <ul class="nav"> <li> <a href="../pages/timeline.html"> <span class="sidebar-mini">TP</span> <span class="sidebar-normal">Timeline Page</span> </a> </li> <li> <a href="../pages/user.html"> <span class="sidebar-mini">UP</span> <span class="sidebar-normal">User Page</span> </a> </li> <li> <a href="../pages/login.html"> <span class="sidebar-mini">LP</span> <span class="sidebar-normal">Login Page</span> </a> </li> <li> <a href="../pages/register.html"> <span class="sidebar-mini">RP</span> <span class="sidebar-normal">Register Page</span> </a> </li> <li> <a href="../pages/lock.html"> <span class="sidebar-mini">LSP</span> <span class="sidebar-normal">Lock Screen Page</span> </a> </li> </ul> </div> </li> </ul> </div> </div>
}`

That's how it looks
https://drive.google.com/open?id=0B7Bw7qSy4XUBUUh3Wm9qWjlwSEE

That should be seen,
"render to pug and nodejs"
https://drive.google.com/open?id=0B7Bw7qSy4XUBV0JRWHNWSUlMUFE

Start by reproducing the issue with the shown page and template code, then inspect how the Bootstrap stylesheet is loaded alongside yo-yo and the page entry point. Confirm what output is expected from the linked screenshots and verify completion when the rendered page displays the Bootstrap styles rather than only the unstyled markup.