How to add Bootstrap button and code

[inanoffice23]

I've been trying this one all day, to no avail

I wanted to test a 'modal' pop up form

I know that in the form section in Power Apps, every section has a label where we can add HTML code, although there is a limit, so the code further below won't fit it all 

I also tried adding the code in Javascript, however it will always say 'unexpected <', I guess because I'm trying to add HTML to the Form settings Javascript section

It also complained about "JSX expressions must have one parent element", although I framed the div area with the below as advised here How to Fix “JSX expressions must have one parent element” in React - Kinsta® Power Pages wouldn't make the modal form work

<React.Fragment> and </React.Fragment>

Where and how would I add the below code so it works? 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 Source of Bootstrap JavaScript · Bootstrap (getbootstrap.com)

[Fubar]

You can only put HTML directly in a Web Page's Page Copy, Content Snippet, or Web Template; alternatively you would have to write the DOM elements dynamically using JavaScript using document.createElement or JQuery .append() etc.

[inanoffice23]

I have been able to add HTML within the form in the label section, I figured if we can do it in the form's metadata, it should work in the front end and it does

The only limitation is that I can only add that many characters, so for that Bootstrap form it cuts it. I wonder if @EmadBeshai might know how to increase the label limit? --- if we add the HTML into the form's metadata, there is no limit to the amount of HTML we can add, as far as I have tested, so this is no longer a question as it has been solved 🙂

[inanoffice23 · Accepted solution]

I added the Bootstrap code in the metadata's form, where the label is, and it works 🙂 If JS function is needed ensure you add an add event listener or else it won't trigger the JS