hubl/src/html/members.html

<div id="members" class="view" style="display: none">
  <ldp-display 
    id="profiles-list" 
    data-src="http://localhost:8000/members/" 
    set-name="firstname, name-separator, lastname"
    value-name-separator="&nbsp;"
    set-location="city, city-separator, country"
    value-city-separator=",&nbsp;"
    data-fields="avatar, name, location"
    widget-avatar="ldp-display-img"
    search-fields="firstname, lastname"
    next="member"
  ></ldp-display>

  <script>// Bootstrap compliance
    const addBootstrapClassesToMembers = function() {
      window.setTimeout(function() {
        const FORM = document.querySelector("ldp-display > ldp-form");
        
        if (FORM) {
          FORM.classList.add("mt-4");
          FORM.classList.add("mb-4");
          FORM.classList.add("d-block");
          FORM.querySelectorAll("ldp-form-text").forEach(function(el) {
            el.classList.add("form-group");
            el.classList.add("d-block");
          });
          FORM.querySelectorAll('input[type="text"]').forEach(function(el) {
            el.classList.add("form-control");
          });
          FORM.querySelectorAll('label').forEach(function(el) {
            el.classList.add("text-capitalize");
          });
          FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary");
          FORM.querySelector('input[type="reset"]').classList.add("btn", "btn-link");
        }
        else {
          addBootstrapClassesToMembers();
        }
      }, 100)
    };

    window.onload = addBootstrapClassesToMembers();
  </script>
</div>