settings.html

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">
        
  <div class="row" id="settings-top-row" data-template="lus:settings-top">
   <div class="col">
    <div class="row">       
     <div class="col-md-2"/> 
     <div class="col-md-6">
      <div class="row">       
        <div class="col" id="results" data-template="lus:settings">
        
      <h2>Customizable settings for <span data-template="lus:user-name"/>
                            </h2>
        </div>    
     </div> <!-- end first row -->

   <div class="row" id="test">
     <div class="col">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active " id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Display settings</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link ml-2" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Bookmarks</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link ml-2" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">External resources</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
          <div id="settings-display" data-template="lrh:settings-display"/>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
          <div id="settings-bookmarks" data-template="lrh:settings-bookmarks"/>
  </div>        
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
          <div id="settings-external" data-template="lus:settings-external">Dummy</div>
  </div>
</div>

   </div>        


     </div>         
     </div>
      <div class="col-md-2"/>
   </div>
   </div>         
  </div>
</div>