Sightly showing unexpected behaviour with bootstrap

I was trying to use the bootstrap navbar with configurable links. Wrote a model class which injects the resource from the cq:dialog, which is a multifield. It all works fine without the bootstrap classes and other jargons. With all these it's not rendering properly. The rendered html contains the sly element and it hasn't been rendered.

The component.html

<sly data-sly-use.childPages="com.project.core.models.NavbarModel">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="
    width: 100%;>
 <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
       <sly data-sly-list.child="${childPages.pages.listChildren}">
      <li class="nav-item">
        <a class="nav-link" href="${child.pagePath}">${child.linkText}<span class="sr-only">(current)</span></a>
      </li>
        </sly>
     </ul>
  </div>
</nav>
</sly>

The NavbarModel.java

package com.project.core.models;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class NavbarModel {
@Inject
private Resource pages;
public Resource getPages() {
     return pages;
   }
}

The cq:dialog is a multifield with a textfield and pathbrowser.

After rendering I'm getting this html.

<div class="navbar aem-GridColumn aem-GridColumn--default--12">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="
    width: 100%;>
 <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
       <sly data-sly-list.child=",,,,">
      <li class="nav-item">
        <a class="nav-link" href=""><span class="sr-only">(current)</span></a>
      </li>
        </sly>
     </ul>
  </div>
</nav>
</sly></div>