title: Bootbox Dialog Modal Bootstrap 4
body: <p>On my page, I have a table.  Inside one of the cells of that table is a link.  I am performing jQuery scripts if that link is clicked.  For instance if the link is clicked I want to show a Bootstrap Dialog.  This can be done easily with <a href="http://bootboxjs.com/" rel="noreferrer">Bootbox.js</a>.  However, bootbox is not updated with support of Bootstrap 4.</p>
  
  <p>Originally, the bootbox wouldn't even show because in Bootstrap 3, the class name to show something was <code>in</code>, but in Bootstrap 4 it is <code>show</code>.  I have fixed that, but here is how it looks currently.</p>
  
  <p><a href="https://i.stack.imgur.com/1VyW7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1VyW7.png" alt="enter image description here"></a></p>
  
  <p>The HTML that is generated by calling bootbox.js for this is:</p>
  
  <pre><code>&lt;div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal"&gt;×&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Test Title?&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="bootbox-body"&gt;Test Message&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-default" type="button" data-bb-handler="cancel"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Cancel&lt;/button&gt;
                  &lt;button class="btn btn-primary" type="button" data-bb-handler="confirm"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Confirm&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that in the <code>div</code> where the class is <code>modal-header</code>, the button comes before the <code>h4</code> element.  If those were switched, then this problem would be solved, but that is what I need help with.  How would I do that via the bootbox syntax?  I know I could just remove the title for now until bootbox becomes updated to support bootstrap 4, but I'm curious if this can be done.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>                bootbox.confirm({
                      className: "show", // where I had to manually add the class name
                      title: "Test Title?",
                      message: "Test Message",
                      buttons: {
                          cancel: {
                              label: "&lt;i class='fa fa-times'&gt;&lt;/i&gt; Cancel"
                          },
                          confirm: {
                              label: "&lt;i class='fa fa-check'&gt;&lt;/i&gt; Confirm"
                          }
                      },
                      callback: function (result) {
                          // my callback function
                      }
                  });
  </code></pre>